Nodejs+vue(express + Element-ui + mySQL)全棧——實現簡單的博客文章管理後臺

時間 2020-05-05

標籤 nodejs+vue nodejs vue express element mysql 實現簡單博客文章管理後臺欄目 MySQL 简体版

原文原文鏈接

剛開始學習前端的時候，總以爲全棧離本身很遠，夢想着有一天我也能本身寫完整個項目。通過這段時間的學習，從慢慢接觸到一點點深刻，我發如今我眼裏的全棧開發其實並無那麼複雜。此次我使用一個簡單的demo做爲例子，向你們簡單介紹一下如何獨自完成前端和後端。css

簡單的博客文章管理後臺：文章的增刪改查，這裏咱們把 新建文章 做爲一個 view （至關於一個頁面），刪除和修改放到一個 view，文章列表做爲一個 view，總共三個view。html

第一步：打開終端，建立一個vue項目，demo是本身命名的文件名，配置直接default默認的就好。前端

1 vue create demo

第二步：項目建立好以後按照提示進入項目文件夾，並運行它。vue

這時咱們打開上面的任意一個地址(ctrl + 單擊)，會跳轉到這個頁面node

這個頁面對應到項目文件就是 src 下面的 App.vue ，至關於 vue 的根組件，裏面包含了一個子組件HelloWorld，能夠在 components 文件夾找到。mysql

由於咱們要寫一個簡單的文章管理後臺，基本都是表單內容，用不到能複用的子組件，因此咱們將子組件HelloWorld刪除。ios

第三步：在項目文件打開終端，安裝 Element-ui 和 routervue-router

在 src 下建立一個 plugins 文件夾，裏面建立一個 element.js 文件，寫入如下代碼：sql

1 import Vue from 'vue'
2 import Element from 'element-ui'
3 import 'element-ui/lib/theme-chalk/index.css'
4 
5 Vue.use(Element)

第四步：到這裏咱們先寫後端，在項目根目錄下新建 server 文件夾，在裏面新建一個 index.js文件數據庫

寫入如下代碼

 1 const express = require('express') // 引入 express
 2 const app = express() // 實例一個 express 對象
 3 
 4 app.use(require('cors')()) // 解決跨域
 5 app.use(express.json()) // express處理json數據
 6 
 7 
 8  
 9 const mysql = require('mysql'); //調用 MySQL模塊
10 
11 // 建立鏈接
12 var db = mysql.createConnection({ 13   host: 'localhost', 14   user: 'root', // 用戶名
15   password: '123456', // 密碼
16   database: 'Article',// 數據庫名
17   port: 3306   // 端口號
18 }) 19 db.connect( (err) => { 20   if(err) throw err; 21   console.log('鏈接成功'); 22 }) 23 
24 
25 app.get('/', (req, res) => { 26   res.send('index') 27 }) 28 
29 // 新增文章
30 app.post('/api/article', (req, res) => { 31   let data = req.body; 32   let sql = "INSERT INTO posts SET ?"; 33   db.query(sql, data, (err, result) => { 34     if(err) { 35  console.log(err); 36     } else { 37  console.log(result); 38  res.send(result) 39  } 40  }) 41 }) 42 
43 // 獲取文章列表
44 app.get('/api/article', (req, res) => { 45   let sql = "SELECT * FROM posts"; 46   db.query(sql, (err, result) => { 47     if(err) { 48  console.log(err); 49     } else { 50  console.log(result); 51  res.json(result); 52  } 53  }) 54 }) 55 
56 // 刪除文章
57 app.delete('/api/article/:id', (req, res) => { 58   let sql = `DELETE FROM posts WHERE id= ${req.params.id}`; 59   db.query(sql, (err, result) => { 60     if(err) { 61  console.log(err); 62     } else { 63  console.log(result); 64  res.json(result); 65  } 66  }) 67 }) 68 
69 // 獲取文章詳情
70 app.get('/api/article/:id', (req, res) => { 71   let sql = `SELECT * FROM posts WHERE id= ${req.params.id}` 72   db.query(sql, (err, result) => { 73     if(err) { 74  console.log(err); 75     } else { 76  res.json(result) 77  } 78  }) 79 }) 80 
81 // 修改文章
82 app.put('/api/article/:id', (req, res) => { 83   let newTitle = req.body.title; 84   let newBody = req.body.body; 85   let sql = `UPDATE posts SET title = '${newTitle}',body = '${newBody}' WHERE ID = ${req.params.id}` 86   db.query(sql, (err, result) => { 87     if(err) { 88  console.log(err); 89     } else { 90  res.json(result) 91  } 92  }) 93 }) 94 
95 // 監聽端口3000
96 app.listen(3000, () => { 97   console.log('http://localhost:3000/') 98 })

第五步：建立三個view，分別命名爲CreateArticle,EditArticle,ListArticle.

寫入如下代碼：

CreateArticle.vue

 1 <template>
 2   <el-form @submit.native.prevent="saveArticle" ref="form" :model="article" label-width="80px">
 3     <el-form-item label="文章標題">
 4       <el-input v-model="article.title"></el-input>
 5     </el-form-item>
 6     
 7     <el-form-item label="文章內容">
 8       <el-input type="textarea" v-model="article.body"></el-input>
 9     </el-form-item>
10     <el-form-item>
11       <el-button type="primary" native-type="submit">當即建立</el-button>
12       <el-button>取消</el-button>
13     </el-form-item>
14   </el-form>
15 </template>
16 <script>
17 export default { 18  data() { 19     return { 20  article: { 21  title: "", 22  body: ""
23  } 24  }; 25  }, 26  methods: { 27  saveArticle() { 28       this.$http.post('/article', this.article).then(res => { 29  console.log(res.config.data) 30         this.$message({ 31  message: '文章建立成功', 32  type: 'success'
33  }); 34         this.$router.push('/article/index') 35  }) 36  } 37  } 38 }; 39 </script>

EditArticle.vue

 1 <template>
 2   <el-form @submit.native.prevent="saveArticle" ref="form" :model="article" label-width="80px">
 3     <el-form-item label="文章標題">
 4       <el-input v-model="article.title"></el-input>
 5     </el-form-item>
 6     
 7     <el-form-item label="文章內容">
 8       <el-input type="textarea" v-model="article.body"></el-input>
 9     </el-form-item>
10     <el-form-item>
11       <el-button type="primary" native-type="submit">保存</el-button>
12       <el-button>取消</el-button>
13     </el-form-item>
14   </el-form>
15 </template>
16 <script>
17 export default { 18  data() { 19     return { 20  article: { 21  title: "", 22  body: ""
23  } 24  }; 25  }, 26  methods: { 27  saveArticle() { 28       this.$http.put(`/article/${this.$route.params.id}`, this.article).then(res => { 29  console.log(res.config.data) 30         this.$message({ 31  message: '文章更新成功', 32  type: 'success'
33  }); 34         this.$router.push('/article/index') 35  }) 36  }, 37  fetch() { 38       this.$http.get(`/article/${this.$route.params.id}`).then(res => { 39         
40         this.article = res.data[0] 41  }) 42  } 43  }, 44  created() { 45     this.fetch() 46  } 47 }; 48 </script>

ListArticle.vue

 1 <template>
 2   <div>
 3     <el-table :data="articles">
 4       <el-table-column prop="title" label="標題" width="140"></el-table-column>
 5       <el-table-column prop="body" label="內容" width="220"></el-table-column>
 6       <el-table-column fixed="right" label="操做" width="100">
 7         <template slot-scope="scope">
 8           <el-button @click="edit(scope.row.id)" type="text" size="small">編輯</el-button>
 9           <el-button @click="remove(scope.row.id)" type="text" size="small">刪除</el-button>
10         </template>
11       </el-table-column>
12     </el-table>
13   </div>
14 </template>
15 
16 <script>
17 export default { 18  data() { 19     return { 20  articles: [] 21  }; 22  }, 23  methods: { 24  fetch() { 25       this.$http.get("/article").then(res => { 26       this.articles = res.data 27  }) 28  }, 29  edit(id) { 30       this.$router.push(`/article/${id}/edit`)
31  }, 32  remove(id) { 33       this.$http.delete(`/article/${id}`).then(res => { 34  console.log(res.data) 35         this.$message({ 36  message: '文章刪除成功', 37  type: 'success'
38  }); 39  }) 40       this.fetch() 41  } 42  }, 43  created() { 44     this.fetch() 45  } 46 }; 47 </script>

修改 App.vue

 1 <template>
 2   <el-container style="height: 100vh; border: 1px solid #eee">
 3     <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
 4       <el-menu router :default-openeds="['1']">
 5         <el-submenu index="1">
 6           <template slot="title">
 7             <i class="el-icon-tickets"></i>內容管理  8           </template>
 9           <el-menu-item index="/article/index">文章列表</el-menu-item>
10           <el-menu-item index="/article/create">新建文章</el-menu-item>
11         </el-submenu>
12       </el-menu>
13     </el-aside>
14 
15     <el-container>
16       <el-header style="text-align: right; font-size: 12px">
17         <el-dropdown>
18           <i class="el-icon-setting" style="margin-right: 15px"></i>
19           <el-dropdown-menu slot="dropdown">
20             <el-dropdown-item>查看</el-dropdown-item>
21             <el-dropdown-item>新增</el-dropdown-item>
22             <el-dropdown-item>刪除</el-dropdown-item>
23           </el-dropdown-menu>
24         </el-dropdown>
25         <span>王小虎</span>
26       </el-header>
27 
28       <el-main>
29         <router-view></router-view>
30       </el-main>
31     </el-container>
32   </el-container>
33 </template>
34 
35 <style>
36 html, 37 body {
38  padding: 0;
39  margin: 0;
40 }
41 .el-header {
42  background-color: #b3c0d1;
43  color: #333;
44  line-height: 60px;
45 }
46 
47 .el-aside {
48  color: #333;
49 }
50 </style>
51 
52 <script>
53 export default { 54  data() { 55  const item = { 56  date: "2016-05-02", 57  name: "王小虎", 58  address: "上海市普陀區金沙江路 1518 弄"
59  }; 60     return { 61  tableData: Array(20).fill(item) 62  }; 63  } 64 }; 65 </script>

修改 main.js

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 
 4 import router from './router' // 引入 router文件夾下的 index.js
 5 import './plugins/element.js' // 引入 element-ui
 6 
 7 Vue.config.productionTip = false 
 8 
 9 import axios from 'axios' // 引入 axios
10 Vue.prototype.$http = axios.create({ // 將 axios方法定義到vue的原型上
11   baseURL: 'http://127.0.0.1:3000/api' // 基礎url，前端發起請求要先拼接上這個地址 
12 }) 13 
14 new Vue({ 15  router, 16   render: h => h(App) 17 }).$mount('#app')

修改 router 文件夾下方的 index.js

import Vue from 'vue' import VueRouter from 'vue-router'
// 分別引入三個 view
import ListArticle from '../views/ListArticle.vue' import CreateArticle from '../views/CreateArticle.vue' import EditArticle from '../views/EditArticle.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', redirect: '/article/index' // 訪問根路徑，重定向到 /article/index
 }, { path: '/article/index', name: 'List-article', component: ListArticle }, { path: '/article/create', name: 'create-article', component: CreateArticle }, { path: '/article/:id/edit', name: 'edit-article', component: EditArticle } ] const router = new VueRouter({ routes }) export default router