🔥 add demo edit README.md

README.md

@@ -1,25 +1,60 @@
-# 记录一次前后端分离案例
+# 一个简单的前后端分离案例
+
+使用到的框架和库
+
 > vuejs vue-router musi-ui axios express mongoose mongodb......
+
 ## 简介
 一个前后端分离的案例,前端vuejs,后端express,数据库mongodb.
-使用express的路由提供api供前端调用,进行对数据库的CURD操作.
+用express的提供api供前端调用,前端ajax请求进行对数据库的CURD操作.
 
 ## 效果图
+首页
+![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/)
+需要本地安装[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的欢迎界面表示成功    
 
 ## 后端开发
+不过首先把后端的服务搭好,方便以后前端调用,使用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.')
+})
+```
+浏览器访问localhost:3000,出现res.send()的内容即表示成功.
+然后添加需要的数据,新建一个models目录放数据模型,mongoose的每个数据model需要一个schema生成,
+新建movie.js文件或者其他的数据模型,用来提供基础数据.
+![movie.js](./demo/moviejs.png)
+定义了title,poster,rating,introduction,created_at,update_at几个基本信息,最后将model导出即可.
 
 ## 前端开发
 
@@ -40,6 +75,8 @@ npm run build
 # build for production and view the bundle analyzer report
 npm run build --report
 ```
+written by [xrr2016](https://github.com/xrr2016)
+
 ## License
 
 [MIT](https://opensource.org/licenses/MIT)

config/index.js

@@ -8,7 +8,7 @@ module.exports = {
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    productionSourceMap: true,
+    productionSourceMap: false,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
     // Before setting to `true`, make sure to:

models/movie.js

@@ -9,5 +9,4 @@ const movieSchema = mongoose.Schema({
   update_at : { type : Date, default : Date.now }
 })
 
-const Movie =  mongoose.model('Movie',movieSchema)
-module.exports = Movie
+const Movie = module.exports = mongoose.model('Movie',movieSchema)

src/components/List.vue

@@ -29,28 +29,27 @@
     <!-- 添加电影按钮 -->
     <mu-float-button icon="add" class="add-movie-button" backgroundColor @click="openAddMovieModal"/>
     <!-- 添加电影表单 -->
-    <vodal :show="addMovieModal" animation="slideDown" :width="500" :height="400" :closeButton="false">
+    <vodal :show="addMovieModal" animation="slideDown" :width="500" :height="480" :closeButton="false">
       <mu-text-field v-model="title" fullWidth icon="movie" label="电影名称" labelFloat/><br/>
       <mu-text-field v-model="poster" fullWidth icon="picture_in_picture" label="海报地址" labelFloat/><br/>
-      <mu-text-field v-model="introduction" fullWidth icon="description" label="简介" labelFloat/><br/>
+      <mu-text-field v-model="introduction"
+      multiLine :rows="2" :rowsMax="6"
+      fullWidth icon="description" label="简介" labelFloat/><br/>
       <mu-text-field v-model="rating" fullWidth icon="star" label="评分" labelFloat/><br/>
       <mu-raised-button @click="closeModal" label="取消" icon="undo"  />
       <mu-raised-button @click="addMovie" label="确定" icon="check" primary/>
     </vodal>
     <!-- 编辑电影表单 -->
-    <vodal :show="editMovieModal" animation="slideDown" :width="500" :height="400" :closeButton="false">
+    <vodal :show="editMovieModal" animation="slideDown" :width="500" :height="480" :closeButton="false">
       <mu-text-field v-model="title" fullWidth icon="movie" label="电影名称" labelFloat/><br/>
       <mu-text-field v-model="poster" fullWidth icon="picture_in_picture" label="海报地址" labelFloat/><br/>
-      <mu-text-field v-model="introduction" fullWidth icon="description" label="简介" labelFloat/><br/>
+      <mu-text-field v-model="introduction"
+      multiLine :rows="2" :rowsMax="6"
+      fullWidth icon="description" label="简介" labelFloat/><br/>
       <mu-text-field v-model="rating" fullWidth icon="star" label="评分" labelFloat/><br/>
       <mu-raised-button @click="closeModal" label="取消" icon="undo"  />
       <mu-raised-button @click="editMovie" label="确定" icon="check" primary/>
     </vodal>
-    <!-- 删除电影对话框 -->
-    <mu-dialog :open="showDialog" title="确定删除电影?" @close="closeDialog">
-     <mu-raised-button slot="actions" @click="closeDialog" label="取消"/>
-     <mu-raised-button slot="actions" primary @click="closeDialog" label="确定"/>
-   </mu-dialog>
   </div>
 </template>
 
@@ -70,8 +69,7 @@ export default {
       movie_id: '',
       movies: [],
       addMovieModal: false,
-      editMovieModal: false,
-      showDialog: false
+      editMovieModal: false
     }
   },
   methods: {
@@ -86,9 +84,6 @@ export default {
           console.log(err)
         })
     },
-    closeDialog() {
-      this.showDialog = false
-    },
     openAddMovieModal() {
       this.addMovieModal = true
     },
@@ -117,7 +112,7 @@ export default {
           rating: this.rating
         })
         .then(res => {
-          this.toastr.success('保存成功.')
+          this.toastr.success('添加电影成功')
           console.log(res.data)
           this.addMovieModal = false
           this.title = ''
@@ -161,12 +156,10 @@ export default {
     },
     removeMovie(movie) {
       let id = movie._id
-      this.showDialog = true
       this.$http.delete(`/api/movie/${id}`)
         .then(res => {
           this.toastr.success("删除成功.")
           console.log(res.data)
-          this.closeDialog()
           this.getMovies()
         })
         .catch(e => console.log(e))