📝 edit README

Author: xrr2016

README.md

@@ -1,10 +1,17 @@
 # 一个简单的前后端分离案例
 
-使用到的框架和库
+
+## 前言
+
+在学习前端开发的过程中知了前后端分离这个概念
+[前后分离架构的探索之路](https://segmentfault.com/a/1190000003795517)
+[我们为什么要尝试前后端分离](https://segmentfault.com/a/1190000006240370)
+因此决定小试身手,项目中主要使用到的框架和库.
 
 > vuejs vue-router musi-ui axios express mongoose mongodb......
 
 ## 简介
+
 一个前后端分离的案例,前端vuejs,后端express,数据库mongodb.
 用express的提供api供前端调用,前端ajax请求进行对数据库的CURD操作.
 
@@ -37,7 +44,9 @@ npm run dev
 接着把本地的mongodb服务跑起来,参考这篇[教程](https://segmentfault.com/a/1190000004868504)
 
 ## 后端开发
-不过首先把后端的服务搭好,方便以后前端调用,使用npm安装express,mongoose等必须的依赖即可,暂时不考虑验证等东西.
+- 官方文档 [express](http://www.expressjs.com.cn/) [mongoose](http://mongoosejs.com/docs/guide.html)
+
+首先把后端的服务搭好,方便以后前端调用,使用npm安装express,mongoose等必须的依赖即可,暂时不考虑验证等东西.
 ```bash
 npm install express body-parser mongoose --save
 ```
@@ -52,6 +61,13 @@ 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生成,
@@ -62,11 +78,89 @@ app.listen(3000,() => {
 
 定义了title,poster,rating,introduction,created_at,update_at几个基本信息,最后将model导出即可.
 
-接着将对数据CURD操作的几个路由写出来
+接着用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 musi-ui axios --save
+```
+然后把不要的文件删除,在src/components目录新建主要的两个组件List,Detail.
+List就是首页的列表,Detail是电影的详细数据,然后把前端路由写出来,在src/router建立前端路由文件,
+只有两个组件之间切换,然后把<router-view></router-view>放到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
@@ -81,9 +175,17 @@ 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
+
 ```
-written by [xrr2016](https://github.com/xrr2016)
 
 ## License
 
 [MIT](https://opensource.org/licenses/MIT)
+
+written by [xrr2016](https://github.com/xrr2016),欢迎issue,fork,star.

demo/apiTest.png

@@ -1,10 +1,6 @@
 const express = require('express')
 const router = express.Router()
-const axios = require('axios')
-const https = require('https')
 const Movie = require('../models/movie')
-const jsonBird = "https://bird.ioliu.cn/v1?url="
-const doubanMovie = "http://api.douban.com/v2/movie/search?q="
 
 // 查询所有电影
 router.get('/movie', (req, res) => {

demo/listMethods01.png

@@ -41,17 +41,15 @@ export default {
       this.$router.go(-1)
     },
     getMovie(title) {
-      const jsonBird = "https://bird.ioliu.cn/v1?url="
-      const doubanSearch = 'http://api.douban.com/v2/movie/search?q='
-      this.$http.get(`${jsonBird}${doubanSearch}${title}`)
+      // 由于自定的movie模型没有足够的数据,故用前端请求豆瓣的api
+      let searchUrl = 'https://bird.ioliu.cn/v1/?url=http://api.douban.com/v2/movie/search?q='
+      this.$http.get(`${searchUrl}${title}`)
         .then(res => {
             console.log(res.data)
-            const doubanMovie = 'http://api.douban.com/v2/movie/subject/'
-            setTimeout(() => {
-              let movieId = res.data.subjects[0].id
-            },0)
+            let movieUrl = 'https://bird.ioliu.cn/v1/?url=http://api.douban.com/v2/movie/subject'
+            let movieId = res.data.subjects[0].id
             if(!!movieId){
-              this.$http.get(`${jsonBird}${doubanMovie}${movieId}`)
+              this.$http.get(`${movieUrl}/${movieId}`)
               .then(res => {
                 console.dir(res.data)
                 if (!!res.data) {

demo/listMethods02.png

@@ -73,6 +73,7 @@ export default {
     }
   },
   methods: {
+    // 获取所有电影的方法
     getMovies() {
       this.$http.get('/api/movie')
         .then(res => {
@@ -84,9 +85,11 @@ export default {
           console.log(err)
         })
     },
+    // 打开添加电影modal的方法
     openAddMovieModal() {
       this.addMovieModal = true
     },
+    // 打开编辑电影modal的方法
     openEditMovieModal(movie) {
       this.editMovieModal = true
       this.title = movie.title
@@ -95,6 +98,7 @@ export default {
       this.poster = movie.poster
       this.movie_id = movie._id
     },
+    // 关闭modal的方法
     closeModal() {
       this.addMovieModal = false
       this.editMovieModal = false
@@ -104,6 +108,7 @@ export default {
       this.introduction = ''
       this.movie_id = ''
     },
+    // 访问后端添加电影的方法
     addMovie() {
       this.$http.post('/api/movie', {
           title: this.title,
@@ -127,13 +132,15 @@ export default {
           console.log(e)
         })
     },
+    // 取消添加电影的方法
     cancelAddMovie() {
       this.addMovieModal = false
       this.title = ''
       this.rating = 0
       this.poster = ''
       this.introduction = ''
     },
+    // 访问后端编辑电影的方法
     editMovie() {
       let id = this.movie_id
       this.$http.put(`/api/movie/${id}`, {
@@ -154,6 +161,7 @@ export default {
         })
         .catch(err => console.log(err))
     },
+    // 删除电影的方法
     removeMovie(movie) {
       let id = movie._id
       this.$http.delete(`/api/movie/${id}`)
@@ -164,7 +172,7 @@ export default {
         })
         .catch(e => console.log(e))
     },
-    searchMovie(title) {},
+    // 跳转到电影详情页的方法
     showDetail(title) {
       this.$router.push(`/movie/${title}`)
     }