首页下载资源移动开发前后端分离-vue-express-mongodb.zip

ZIP前后端分离-vue-express-mongodb.zip

weixin_459226443MB需要积分:1

资源文件列表:

前后端分离_vue-express-mongodb 大约有50个文件
  1. vue-express-mongodb-master/.babelrc 200B
  2. vue-express-mongodb-master/.editorconfig 147B
  3. vue-express-mongodb-master/.gitignore 44B
  4. vue-express-mongodb-master/app.js 749B
  5. vue-express-mongodb-master/data.js 1.28KB
  6. vue-express-mongodb-master/index.html 215B
  7. vue-express-mongodb-master/package-lock.json 310.15KB
  8. vue-express-mongodb-master/package.json 1.8KB
  9. vue-express-mongodb-master/README.md 5.56KB
  10. vue-express-mongodb-master/build/build.js 1.07KB
  11. vue-express-mongodb-master/build/check-versions.js 1.14KB
  12. vue-express-mongodb-master/build/dev-client.js 245B
  13. vue-express-mongodb-master/build/dev-server.js 2.25KB
  14. vue-express-mongodb-master/build/utils.js 1.95KB
  15. vue-express-mongodb-master/build/vue-loader.conf.js 398B
  16. vue-express-mongodb-master/build/webpack.base.conf.js 1.39KB
  17. vue-express-mongodb-master/build/webpack.dev.conf.js 1.2KB
  18. vue-express-mongodb-master/build/webpack.prod.conf.js 3.11KB
  19. vue-express-mongodb-master/config/db.js 72B
  20. vue-express-mongodb-master/config/dev.env.js 139B
  21. vue-express-mongodb-master/config/index.js 1.5KB
  22. vue-express-mongodb-master/config/prod.env.js 48B
  23. vue-express-mongodb-master/demo/addMovie.gif 1.23MB
  24. vue-express-mongodb-master/demo/apiTest.png 51.64KB
  25. vue-express-mongodb-master/demo/build.png 99.84KB
  26. vue-express-mongodb-master/demo/demo.png 84.33KB
  27. vue-express-mongodb-master/demo/editMovie.gif 671.67KB
  28. vue-express-mongodb-master/demo/gitads.png 172.51KB
  29. vue-express-mongodb-master/demo/listMethods01.png 43.93KB
  30. vue-express-mongodb-master/demo/listMethods02.png 41.21KB
  31. vue-express-mongodb-master/demo/methodBtn.png 46.65KB
  32. vue-express-mongodb-master/demo/moviejs.png 42.75KB
  33. vue-express-mongodb-master/demo/project.png 23.31KB
  34. vue-express-mongodb-master/demo/proxyTabel.png 24.4KB
  35. vue-express-mongodb-master/demo/removeMovie.gif 85.18KB
  36. vue-express-mongodb-master/demo/router.png 23.41KB
  37. vue-express-mongodb-master/demo/showDetail.gif 413.92KB
  38. vue-express-mongodb-master/models/movie.js 356B
  39. vue-express-mongodb-master/router/index.js 156B
  40. vue-express-mongodb-master/router/movie.js 1.74KB
  41. vue-express-mongodb-master/src/App.vue 1.53KB
  42. vue-express-mongodb-master/src/main.js 1.19KB
  43. vue-express-mongodb-master/src/assets/favicon.ico 1.37KB
  44. vue-express-mongodb-master/src/assets/icon.css 11.72KB
  45. vue-express-mongodb-master/src/assets/logo.png 6.69KB
  46. vue-express-mongodb-master/src/components/Detail.vue 3.34KB
  47. vue-express-mongodb-master/src/components/List.vue 6.18KB
  48. vue-express-mongodb-master/src/router/index.js 401B
  49. vue-express-mongodb-master/static/.gitkeep
  50. 前后端分离_vue-express-mongodb/项目内附说明/如果解压失败请用ara软件解压.txt 42B

资源介绍:

前后端分离_vue-express-mongodb.zip
# 前后端分离示例 一个前后端分离的案例,前端 vuejs,后端 express, 数据库 mongodb。 使用 express 的提供api供前端调用,前端ajax请求进行对数据库的CURD操作。 ## 前言 在学习前端开发的过程中了解到前后端分离这个概念 [前后分离架构的探索之路](https://segmentfault.com/a/1190000003795517) [我们为什么要尝试前后端分离](https://segmentfault.com/a/1190000006240370) 因此决定小试身手,项目中主要使用到的框架和库. > vuejs vue-router muse-ui axios express mongoose mongodb...... ## 效果图 首页 ![demo](./demo/demo.png) 添加电影 ![addMovie](./demo/addMovie.gif) 更新电影信息 ![editMovie](./demo/editMovie.gif) 展示电影详情 ![showDetail](./demo/showDetail.gif) 删除电影 ![removeMovie](./demo/removeMovie.gif) ## 开发环境 需要本地安装[node](https://nodejs.org/en/),[npm](https://www.npmjs.com/)或[yarn](https://yarnpkg.com/),[mongodb](https://www.mongodb.com/) ## 初始化 首先用vue-cli初始化项目目录 ```bash vue init webpack my-project cd my-rpoject && npm install npm run dev ``` 看到8080端口出现vuejs的欢迎界面表示成功 接着把本地的mongodb服务跑起来,参考这篇[教程](https://segmentfault.com/a/1190000004868504) ## 后端开发 - 官方文档 [express](http://www.expressjs.com.cn/) [mongoose](http://mongoosejs.com/docs/guide.html) 首先把后端的服务搭好,方便以后前端调用,使用npm安装express,mongoose等必须的依赖即可,暂时不考虑验证等东西. ```bash npm install express body-parser mongoose --save ``` 然后在项目根目录添加一个app.js,编写好启动express服务器的代码 ``` const express = require('express') const app = express() app.use('/',(req,res) => { res.send('Yo!') }) app.listen(3000,() => { console.log('app listening on port 3000.') }) ``` 使用nodemon或babel-watch,方便开发 ```bash npm install nodemon --save-dev nodemon app.js ``` 浏览器访问localhost:3000,出现res.send()的内容即表示成功. 然后添加需要的数据,新建一个models目录放数据模型,mongoose的每个数据model需要一个schema生成, 新建movie.js文件或者其他的数据模型,用来提供基础数据. ![movie.js](./demo/moviejs.png) 定义了title,poster,rating,introduction,created_at,update_at几个基本信息,最后将model导出即可. 接着用mongoose链接mongodb,在app.js里添加 ``` const mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27017/yourDbName') ``` 链接数据库成功后,可以用Robomongo可视化工具或者在CMD里输入mongo命令查看数据库. 接着将对数据CURD操作的几个路由写出来,新建router文件夹,新建index.js和movie.js分别对应首页路由,和对数据 操作的路由,如下. - 首页路由 [index.js](./router/index.js) - 对数据操作的路由 [movie.js](./router/movie.js) 最后将路由应用到app.js ``` ...... const index = require('./router/index') const movie = require('./router/movie') ...... app.use('/',index) app.use('/api',movie) ...... ``` 使用Postman进行测试,测试成功的话,后端服务基本上就完成了. ![测试](./demo/apiTest.png) ## 前端开发 首先安装必要的依赖,看自己喜欢选择. [muse-ui](https://museui.github.io/#/index) [axios](https://github.com/mzabriskie/axios) ```bash npm install muse-ui axios --save ``` 然后把不要的文件删除,在src/components目录新建主要的两个组件List,Detail. List就是首页的列表,Detail是电影的详细数据,然后把前端路由写出来,在src/router建立前端路由文件, 只有两个组件之间切换,然后把放到App.vue里面就可以了. 前端路由 ![index.js](./demo/router.png) 数据获取,由于我们的express是在3000端口启动的,而前端开发在8080端口,由于跨域所以要配置好vue-cli的proxyTable 选项,位于config/index.js,改写proxyTable. ![proxyTable](./demo/proxyTabel.png) 这样当在前端用axios访问 '/api' 的时候,就会被代理到 'http://localhost:3000/api',从而获得需要的数据. 能够获取到数据之后就是编写界面了,由于用了muse-ui组件库,所以只要按着文档写一般不会错,要是不满意就自己搭界面. 主要就是用ajax访问后端对数据增删改查的路由,将这些操作都写在组件的methods对象里面，写好主要的方法后，将方法 ...... ![listMethods01](./demo/listMethods01.png) ![listMethods02](./demo/listMethods02.png) ...... 用vuejs里的写法,绑定到对应的按钮上 ``` @click="methodName" ``` ![methodBtn](./demo/methodBtn.png) 这样前端的开发就基本完成了. ## 结语 前端开发完成后,就可以用webpack打包了,注意将config/index.js文件里面的productionSourceMap设为false, 不然打包出来文件很大,最后用express.static中间件将webpack打包好的项目目录'dist'作为express静态文件服务的目录. ```bash npm run build ``` ![build](./demo/build.png) ``` app.use(express.static('dist')) ``` 最后案例完成后的目录结构就是这样. ![project](./demo/project.png) ## Build Setup ``` bash # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # 后端开发 localhost:3000 npm run server # webpack打包后,后端运行express静态目录'dist' npm run start ``` ## License [MIT](https://opensource.org/licenses/MIT) written by [xrr2016](https://github.com/xrr2016),欢迎issue,fork,star.
100+评论
captcha

    相关资源

    1. 光热电站最优容量配置方法代码：以综合成本为目标，采用Cplex求解器的高效解决方案（独家编写，灵活可改写）,光热电站容量配置方法代码详解：以综合成本为目标，采用Cplex求解器的高效解决方案,光热电

      ZjnnnHlyf#后端ZIP9.53MB1周前
      资源摘要:光热电站最优容量配置方法代码：以综合成本为目标，采用Cplex求解器的高效解决方案（独家编写，灵活可改写）,光热电站容量配置方法代码详解：以综合成本为目标，采用Cplex求解器的高效解决方案,光热电站容量配置方法代码复现图中文献以综合成本为目标采用cplex求解器求解本人亲自编写，市面唯一，可改写性强,光热电站;容量配置方法;复现文献;Cplex求解器;综合成本;唯一编写。,基于Cplex求解器的光热电站综合成本优化配置代码研究

    2. OpenDrive高精地图解析源码SDK：全网最全最轻量级，深入解析与工程项目移植的宝贵资源,OpenDrive高精地图解析源码SDK：全网最全，轻量级解析，深入了解内部机理与项目移植的宝贵资源,op

      LfegtVPx#前端ZIP528.02KB1周前
      资源摘要:OpenDrive高精地图解析源码SDK：全网最全最轻量级，深入解析与工程项目移植的宝贵资源,OpenDrive高精地图解析源码SDK：全网最全，轻量级解析，深入了解内部机理与项目移植的宝贵资源,opendrive高精地图解析源码SDK , 毫不夸张的说这是全网最全最轻量级的opendrive高精地图解析源码，希望深入了解opendrive高精地图解析内部机理的朋友，又或者希望直接将该SDK移植到工程项目中的朋友，这个源码SDK不可多得。实实在在的工作经验总结,核心关键词：opendrive高精地图解析源码SDK; 最全最轻量级; 内部机理; 移植工程项目; 工作经验总结,《全网最全OpenDrive高精地图解析源码SDK，助力项目实战经验分享》

    3. 鸽群优化算法与SVM拟合预测模型：多特征输入单变量输出，Matlab程序详细注释与实用指南,鸽群优化算法与SVM拟合预测模型：多特征输入单变量输出，详细注释的Matlab程序 下面是该模型的主要介绍

      uxDhmvmqT#网络技术ZIP3.72MB1周前
      资源摘要:鸽群优化算法与SVM拟合预测模型：多特征输入单变量输出，Matlab程序详细注释与实用指南,鸽群优化算法与SVM拟合预测模型：多特征输入单变量输出，详细注释的Matlab程序 下面是该模型的主要介绍哦！如果您需要进一步的帮助或有任何问题，请随时联系我。,鸽群优化算法PIO优化SVM，建立多特征输入单个因变量输出的拟合预测模型。程序内注释详细直接替数据就可以用。程序语言为matlab。想要的可以加好友我。,鸽群优化算法; PIO优化; SVM; 多特征输入; 单因变量输出; 拟合预测模型; MATLAB程序; 程序内注释详细,基于鸽群优化算法与PIO优化的SVM多特征预测模型：Matlab程序注释版

    4. Labview WebDAV范例：物联网文件管理与远程访问，简洁操作指南（附源码与学习资源）,Labview WebDAV范例：物联网文件便捷操作指南（上传、删除、查询及远程访问） - 原创学习软件

      uxDhmvmqT#存储ZIP1.11MB1周前
      资源摘要:Labview WebDAV范例：物联网文件管理与远程访问，简洁操作指南（附源码与学习资源）,Labview WebDAV范例：物联网文件便捷操作指南（上传、删除、查询及远程访问） - 原创学习软件，尊重知识产权,labview webdav简单实用范例(实现简单物联网)1.主要功能如下:(1)实现客户端文件上传、删除、查询和目录创建等功能(文件上传后可通过网页浏览相关文件，具有较好的便捷性），可辅助实现网站文件浏览等功能。(2)通过搭建好的软件进行文件上传后，可通过内网映射工具，实现外网远程访问注:1.软件源码是2018版本，提供简单软件使用说明。2.软件为原创，只用于学习交流，拿后后请勿转发转卖，尊重作者知识产权和劳动付出。3.产品为源码，出概不 ，请诚信交易，相互尊重。4.该软件demo的运行需要通过电脑iis搭建webdav网站，相关搭建过程网上有具体资料(搭建较为简单），本人不负责搭建。,关键词：Labview; WebDAV; 文件上传; 删除; 查询; 目录创建; 网页浏览; 内网映射; 外网远程访问; IIS; 搭建; 物联网; 简单实用范例。,Lab

    5. 短路电流计算的三种方法：实用计算法、对称分量法及节点导纳法在Matlab编程中的应用,短路电流计算的三种方法：实用计算法、对称分量法与节点导纳法 MATLAB编程详解,短路电流计算 Matlab编程

      dENnTvhGkVdD#游戏开发ZIP1.01MB1周前
      资源摘要:短路电流计算的三种方法：实用计算法、对称分量法及节点导纳法在Matlab编程中的应用,短路电流计算的三种方法：实用计算法、对称分量法与节点导纳法 MATLAB编程详解,短路电流计算 Matlab编程计算 针对常见的四种短路故障（单相接地短路，两相相间短路，两相接地短路，三相短路），可采取三种方法进行计算:1.实用短路电流计算2.对称分量法计算3.节点导纳法计算,短路电流计算; Matlab编程计算; 短路故障类型; 实用短路电流计算; 对称分量法; 节点导纳法计算,Matlab编程计算短路电流：四种故障类型与三种计算方法详解

    6. Arcconf存储管理软件

      unbuntu_luo#操作系统ZIP13.05MB1周前
      资源摘要:只支持linux，压缩包里面有二进制文件和rpm包两种使用方式

    7. 嵌入式Excel报表系统：实时读取WINCC历史数据，多种报表模板灵活生成，数据处理功能丰富,基于WINCC的历史数据Excel报表系统：实时数据展示、模板化生成与数据处理教程,wincc嵌入式exc

      GnykIKCRVXnv#硬件开发ZIP7.1MB1周前
      资源摘要:嵌入式Excel报表系统：实时读取WINCC历史数据，多种报表模板灵活生成，数据处理功能丰富,基于WINCC的历史数据Excel报表系统：实时数据展示、模板化生成与数据处理教程,wincc嵌入式excel报表带视频教程一、功能介绍该报表系统能够读取WINCC中历史归档数据，产生出EXCEL报表文件，同时在画面中EXCEL控件实时显示。该报表系统有如下优点：1、 该报表系统具备日报表、月报表、年报表、自由报表（任意时间段）功能。2、 报表读取的数据是WINCC自带的变量记录数据库，不需要第三方数据库。3、 该报表系统能在不同的项目之间移植，过程简单。4、 生成的EXCEL文件是基于模板文件生成的，模板文件修改容易，效果直观。5、 数据读取时，进行了适当的筛选和处理。只读取有效数据，数据质量不合格的将被舍弃。数据处理有3种方式：实时、平均、累计。6、 日、月、年报表数据来源可以相互独立。7、 该报表系统在画面中集成了EXCEL控件，能实时显示生成的报表文件。,wincc;嵌入式excel报表;功能介绍;历史数据读取;EXCEL控件显示;日报表;月报表;年报表;自由

    8. 基于Simulink的神经网络观测器与无人机分层编队控制的鲁棒控制复现研究文献参考,基于Simulink的神经网络观测器与无人机分层编队控制的鲁棒控制复现研究,神经网络观测器，无人机鲁棒控制，分层编队

      GnykIKCRVXnv#考试认证ZIP1.05MB1周前
      资源摘要:基于Simulink的神经网络观测器与无人机分层编队控制的鲁棒控制复现研究文献参考,基于Simulink的神经网络观测器与无人机分层编队控制的鲁棒控制复现研究,神经网络观测器，无人机鲁棒控制，分层编队控制，有文献可参考。符合要求请放心联系，基于simulink，复现，保证能够运行。,神经网络观测器; 无人机鲁棒控制; 分层编队控制; 文献参考; Simulink复现; 保证运行。,基于Simulink的神经网络观测器在无人机鲁棒分层编队控制中的应用研究
    站长QQ:九六九五七三七