{"id":13536405,"url":"https://github.com/xrr2016/vue-express-mongodb","last_synced_at":"2025-04-04T17:06:15.371Z","repository":{"id":17690847,"uuid":"81932789","full_name":"xrr2016/vue-express-mongodb","owner":"xrr2016","description":"前后端分离","archived":false,"fork":false,"pushed_at":"2022-12-13T02:26:53.000Z","size":3751,"stargazers_count":587,"open_issues_count":21,"forks_count":143,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-03-28T16:05:47.168Z","etag":null,"topics":["express","mongodb","vuejs2"],"latest_commit_sha":null,"homepage":"https://github.com/xrr2016/vue-express-mongodb","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xrr2016.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-14T10:15:32.000Z","updated_at":"2025-03-16T08:43:32.000Z","dependencies_parsed_at":"2023-01-11T20:27:07.488Z","dependency_job_id":null,"html_url":"https://github.com/xrr2016/vue-express-mongodb","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrr2016%2Fvue-express-mongodb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrr2016%2Fvue-express-mongodb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrr2016%2Fvue-express-mongodb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrr2016%2Fvue-express-mongodb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xrr2016","download_url":"https://codeload.github.com/xrr2016/vue-express-mongodb/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217175,"owners_count":20903009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","mongodb","vuejs2"],"created_at":"2024-08-01T09:00:38.663Z","updated_at":"2025-04-04T17:06:15.354Z","avatar_url":"https://github.com/xrr2016.png","language":"JavaScript","funding_links":[],"categories":["Demo示例"],"sub_categories":[],"readme":"# 前后端分离示例\n\n一个前后端分离的案例,前端 vuejs,后端 express, 数据库 mongodb。\n使用 express 的提供api供前端调用,前端ajax请求进行对数据库的CURD操作。\n\n## 前言\n\n在学习前端开发的过程中了解到前后端分离这个概念\n[前后分离架构的探索之路](https://segmentfault.com/a/1190000003795517)\n[我们为什么要尝试前后端分离](https://segmentfault.com/a/1190000006240370)\n因此决定小试身手,项目中主要使用到的框架和库.\n\n\u003e vuejs vue-router muse-ui axios express mongoose mongodb......\n\n## 效果图\n首页\n![demo](./demo/demo.png)\n添加电影\n![addMovie](./demo/addMovie.gif)\n更新电影信息\n![editMovie](./demo/editMovie.gif)\n展示电影详情\n![showDetail](./demo/showDetail.gif)\n删除电影\n![removeMovie](./demo/removeMovie.gif)\n\n## 开发环境\n需要本地安装[node](https://nodejs.org/en/),[npm](https://www.npmjs.com/)或[yarn](https://yarnpkg.com/),[mongodb](https://www.mongodb.com/)\n\n## 初始化\n首先用vue-cli初始化项目目录\n```bash\nvue init webpack my-project\n\ncd my-rpoject \u0026\u0026 npm install\n\nnpm run dev\n```\n看到8080端口出现vuejs的欢迎界面表示成功\n\n接着把本地的mongodb服务跑起来,参考这篇[教程](https://segmentfault.com/a/1190000004868504)\n\n## 后端开发\n- 官方文档 [express](http://www.expressjs.com.cn/) [mongoose](http://mongoosejs.com/docs/guide.html)\n\n首先把后端的服务搭好,方便以后前端调用,使用npm安装express,mongoose等必须的依赖即可,暂时不考虑验证等东西.\n```bash\nnpm install express body-parser mongoose --save\n```\n然后在项目根目录添加一个app.js,编写好启动express服务器的代码\n```\nconst express = require('express')\nconst app = express()\napp.use('/',(req,res) =\u003e {\n  res.send('Yo!')\n})\napp.listen(3000,() =\u003e {\n    console.log('app listening on port 3000.')\n})\n```\n使用nodemon或babel-watch,方便开发\n```bash\nnpm install nodemon --save-dev\n\nnodemon app.js\n```\n\n浏览器访问localhost:3000,出现res.send()的内容即表示成功.\n\n然后添加需要的数据,新建一个models目录放数据模型,mongoose的每个数据model需要一个schema生成,\n\n新建movie.js文件或者其他的数据模型,用来提供基础数据.\n\n![movie.js](./demo/moviejs.png)\n\n定义了title,poster,rating,introduction,created_at,update_at几个基本信息,最后将model导出即可.\n\n接着用mongoose链接mongodb,在app.js里添加\n```\nconst mongoose = require('mongoose')\nmongoose.connect('mongodb://localhost:27017/yourDbName')\n```\n\n链接数据库成功后,可以用Robomongo可视化工具或者在CMD里输入mongo命令查看数据库.\n\n接着将对数据CURD操作的几个路由写出来,新建router文件夹,新建index.js和movie.js分别对应首页路由,和对数据\n\n操作的路由,如下.\n- 首页路由  [index.js](./router/index.js)\n- 对数据操作的路由  [movie.js](./router/movie.js)\n\n最后将路由应用到app.js\n```\n......\nconst index = require('./router/index')\nconst movie = require('./router/movie')\n......\napp.use('/',index)\napp.use('/api',movie)\n......\n```\n\n使用Postman进行测试,测试成功的话,后端服务基本上就完成了.\n![测试](./demo/apiTest.png)\n\n## 前端开发\n首先安装必要的依赖,看自己喜欢选择.\n[muse-ui](https://museui.github.io/#/index) [axios](https://github.com/mzabriskie/axios)\n```bash\nnpm install muse-ui axios --save\n```\n然后把不要的文件删除,在src/components目录新建主要的两个组件List,Detail.\nList就是首页的列表,Detail是电影的详细数据,然后把前端路由写出来,在src/router建立前端路由文件,\n只有两个组件之间切换,然后把\u003crouter-view\u003e\u003c/router-view\u003e放到App.vue里面就可以了.\n\n前端路由\n\n![index.js](./demo/router.png)\n\n数据获取,由于我们的express是在3000端口启动的,而前端开发在8080端口,由于跨域所以要配置好vue-cli的proxyTable\n选项,位于config/index.js,改写proxyTable.\n\n![proxyTable](./demo/proxyTabel.png)\n\n这样当在前端用axios访问 '/api' 的时候,就会被代理到 'http://localhost:3000/api',从而获得需要的数据.\n\n能够获取到数据之后就是编写界面了,由于用了muse-ui组件库,所以只要按着文档写一般不会错,要是不满意就自己搭界面.\n\n主要就是用ajax访问后端对数据增删改查的路由,将这些操作都写在组件的methods对象里面，写好主要的方法后，将方法\n\n......\n\n![listMethods01](./demo/listMethods01.png)\n![listMethods02](./demo/listMethods02.png)\n\n......\n\n用vuejs里的写法,绑定到对应的按钮上\n```\n  @click=\"methodName\"\n```\n![methodBtn](./demo/methodBtn.png)\n\n这样前端的开发就基本完成了.\n\n\n## 结语\n\n前端开发完成后,就可以用webpack打包了,注意将config/index.js文件里面的productionSourceMap设为false,\n不然打包出来文件很大,最后用express.static中间件将webpack打包好的项目目录'dist'作为express静态文件服务的目录.\n\n```bash\nnpm run build\n```\n![build](./demo/build.png)\n\n```\napp.use(express.static('dist'))\n```\n\n最后案例完成后的目录结构就是这样.\n\n![project](./demo/project.png)\n\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# 后端开发 localhost:3000\nnpm run server\n\n# webpack打包后,后端运行express静态目录'dist'\nnpm run start\n\n```\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n\nwritten by [xrr2016](https://github.com/xrr2016),欢迎issue,fork,star.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxrr2016%2Fvue-express-mongodb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxrr2016%2Fvue-express-mongodb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxrr2016%2Fvue-express-mongodb/lists"}