刚开始学习前端的时候，总觉得全栈离自己很远，梦想着有一天我也能自己写完整个项目。经过这段时间的学习，从慢慢接触到一点点深入，我发现在我眼里的全栈开发其实并没有那么复杂。这次我使用一个简单的demo作为例子，向大家简单介绍一下如何独自完成前端和后端。
简单的博客文章管理后台：文章的增删改查，这里我们把 新建文章 作为一个 view （相当于一个页面），删除和修改放到一个 view，文章列表作为一个 view，总共三个view。
第一步：打开终端，创建一个vue项目，demo是自己命名的文件名，配置直接default默认的就好。
1 vue create demo
第二步：项目创建好之后按照提示进入项目文件夹，并运行它。
这时我们打开上面的任意一个地址(ctrl + 单击)，会跳转到这个页面
这个页面对应到项目文件就是 src 下面的 App.vue ，相当于 vue 的根组件，里面包含了一个子组件HelloWorld，可以在 components 文件夹找到。
因为我们要写一个简单的文章管理后台，基本都是表单内容，用不到能复用的子组件，所以我们将子组件HelloWorld删除。
第三步：在项目文件打开终端，安装 Element-ui 和 router
在 src 下创建一个 plugins 文件夹，里面创建一个 element.js 文件，写入以下代码：
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
到此所有的配置完毕
最后在项目目录打开终端执行
1 npm run serve
在server文件夹目录打开终端执行
1 node server
最终效果
数据库中也能找到录入的数据。
结语：阴郁的日子总会过去，黎明就在前方，武汉加油！