【老司机带你飞】脚手架综合案例

后端：node.js
数据库：mysql
工具：webstrom

此案例是把我们指令综合案例改装成vue-cli脚手架来实现


在webstrom中创建一个名为blog的vue-cli项目。最终项目目录结构如下

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import resource from './resource'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

App.vue

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import BlogList from "@/components/BlogList";
import BlogAdd from "@/components/BlogAdd";
import BlogUpdate from "@/components/BlogUpdate";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/',
      component:BlogList,
      redirect:"/blogList"
    },
    {
      path: '/blogList',
      name:"blogList",
      component: BlogList
    },
    {
      path:'/blogAdd',
      name:"blogAdd",
      component:BlogAdd
    },
    {
      path:'/blogUpdate/:id',
      name:"blogUpdate",
      component:BlogUpdate
    }
  ],
  mode:"history"
})

resource/index.js

import Vue from 'vue'
import Resource from 'vue-resource'
Vue.use(Resource)
export default {}

BlogList.vue

BlogAdd.vue

BlogUpdate.vue

数据库

CREATE TABLE `blog` (
    `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '表id',
    `title` varchar(255) DEFAULT NULL COMMENT '博客标题',
    `author` varchar(255) DEFAULT NULL COMMENT '作者',
    `classify` varchar(255) DEFAULT NULL COMMENT '文章分类',
    `content` text COMMENT '文章内容',
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='博客表';

在任意位置创建一个server.js文件，写入

//引入express框架
var express = require('express');
//创建express实例
var app = express();

//解析表单的插件
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
    extended: false
}));

//设置跨域访问
app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

//创建mysql数据库连接对象
var mysql = require('mysql');
var conn = mysql.createConnection({
    host: 'localhost', //数据库地址
    user: 'root', //账号
    password: 'root', //密码
    database: 'vue', //库名
    multipleStatements: true //允许执行多条语句
});


//查询出所有数据
app.get('/api/getuser', (req, res) => {
    var sqlStr = 'select * from user ';
    conn.query(sqlStr, (err, results) => {
        if (err) return res.json({
            err_code: 1,
            message: '查询出错',
            affextedRows: 0
        });
        res.json({
            err_code: 200,
            message: results,
            affextedRows: results.affextedRows
        })
    })
});

//根据用户id查询数据
app.get('/api/getuserbyid', (req, res) => {
    var id = req.query.id;
    console.log(req.query);
    var sqlStr = 'select * from user where id=?';
    conn.query(sqlStr, id, (err, results) => {
        if (err) return res.json({
            err_code: 1,
            message: '查询出错',
            affextedRows: 0
        });
        res.json({
            err_code: 200,
            message: results,
            affextedRows: results.affextedRows
        })
    })
});

//添加用户
app.post('/api/adduser', (req, res) => {
    var user = req.body;
    console.log(req.body);
    var sqlStr = 'insert into user set ?';
    conn.query(sqlStr, user, (err, results) => {
        if (err) return res.json({
            err_code: 1,
            message: err,
            affectedRows: 0
        });
        res.json({
            err_code: 200,
            message: '添加成功',
            affectedRows: results.affectedRows
        })
    })
});

//删除用户
app.get('/api/deluser',(req,res)=>{
    var id = req.query.id;
    var sqlStr = 'delete from user where id=?';
    conn.query(sqlStr,id,(err,results)=>{
        if(err) return res.json({
            err_code:1,
            message:err,
            affectedRows: 0
        });
        return  res.json({
            err_code: 200,
            message: '删除成功',
            affectedRows: results.affectedRows
        })
    })
});

//修改
app.post('/api/updateuser', (req, res) => {
    var user = req.body;
    var updateData = {
        username:user.username,
        age:user.age,
        sex:user.sex
    };
    var id = user.id;
    var sqlStr = 'update user set ? where id = ?';
    conn.query(sqlStr, [updateData,id], (err, results) => {
        if (err) return res.json({
            err_code: 1,
            message: err,
            affectedRows: 0
        });
        res.json({
            err_code: 200,
            message: '修改成功',
            affectedRows: results.affectedRows
        })
    })
});

app.listen(3000, () => {
    console.log('正在监听端口3000');
});

打开cmd使用命令：node server.js即可启动服务端监听程序。
然后启动vue-cli即可测试。

QQ：732005030
扫码加微信