【轻松学vue】脚手架综合案例

后端：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/>'
})

App.vue

<template>
  <div id="app">
    <div class="header">
      <router-link to="/blogList" active-class="active">博客列表</router-link>
      <router-link to="/blogAdd" active-class="active">添加博客</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  a{
    color: #000;
    text-decoration: none;
  }
.header{
  width: 100%;
  height: 50px;
  background: #cccccc;
  text-align: center;
  line-height: 50px;
}
  .header a{
    display: inline-block;
    padding: 0 10px;
    height: 50px;
    margin: 0 10px;
  }
  .active{
    background: red;
    color: #ffffff;
  }
</style>

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

<template>
    <div class="blog-list">
      <div class="blog-item" v-for="blog in blogs" :key="blog.id">
        <h1>{{blog.title}}</h1>
        <p>{{blog.author}}-{{blog.classify}}</p>
        <p>{{blog.content}}</p>
        <p>
<!--          <a href="#">修改</a>-->
          <router-link v-bind:to="'/blogUpdate/'+blog.id">修改</router-link>
          <a href="javascript:;" @click="delBlog" v-bind:data-id="blog.id">删除</a>
        </p>
      </div>
    </div>
</template>

<script>
  var url = "http://localhost:3000"
    export default {
        name: "BlogList",
      data(){
          return {
            blogs:[]
          }
      },
      created:function () {
        this.getBlogList();
      },
      methods:{
        delBlog:function (event) {
          var id = event.target.dataset.id;
          this.$http.get(url+"/api/delBlog",{params:{id:id}}).then((res)=>{
            var result = res.data;
            if(result.err_code==200){
              alert(result.message);
              this.getBlogList();
            }
          })
        },
        getBlogList:function () {
          this.$http.get(url+"/api/getBlog").then((res)=>{
            this.blogs= res.data.message;
          })
        }
      }
    }
</script>

<style scoped>
  .blog-list{
    width: 80%;
    margin: auto;
  }
  .blog-item{
    border: 1px solid #cccccc;
    padding: 10px;
    margin: 10px;
  }
</style>

BlogAdd.vue

<template>
    <div class="blog-add">
      <form @submit.prevent>
        <p>博客标题：<input type="text" v-model="blog.title"></p>
        <p>博客作者：<input type="text" v-model="blog.author"></p>
        <p>博客分类：
<!--          <input type="text" v-model="blog.classify">-->
          <select name="" id="" v-model="blog.classify">
            <option value="" disabled>请选择分类</option>
            <option value="html">html</option>
            <option value="vue">vue</option>
            <option value="java">java</option>
          </select>
        </p>
        <p>博客内容：
          <textarea cols="50" rows="5" v-model="blog.content"></textarea>
        </p>
        <p><button @click="addBlog">提交</button></p>
      </form>
    </div>
</template>

<script>
    export default {
        name: "BlogAdd",
      data(){
          return{
            blog:{
              classify:''
            }
          }
      },
      methods:{
        addBlog:function () {
          this.$http.post("http://localhost:3000/api/addBlog",this.blog,{emulateJSON:true}).then((res)=>{
            var result = res.data;
            if(result.err_code==200){
              alert(result.message);
              this.blog={
                classify:''
              }
            }
          })
        }
      }
    }
</script>

<style scoped>
    .blog-add{
      width: 80%;
      margin: auto;
    }
</style>

BlogUpdate.vue

<template>
    <div class="blog-update">
      <form @submit.prevent>
        <p>博客标题：<input type="text" v-model="blog.title"></p>
        <p>博客作者：<input type="text" v-model="blog.author"></p>
        <p>博客分类：
          <!--          <input type="text" v-model="blog.classify">-->
          <select name="" id="" v-model="blog.classify">
            <option value="" disabled>请选择分类</option>
            <option value="html">html</option>
            <option value="vue">vue</option>
            <option value="java">java</option>
          </select>
        </p>
        <p>博客内容：
          <textarea cols="50" rows="5" v-model="blog.content"></textarea>
        </p>
        <p><button @click="updateBlog">提交</button></p>
      </form>
    </div>
</template>

<script>
    export default {
        name: "BlogUpdate",
      data(){
          return {
            blog:{}
          }
      },
      created:function(){
          console.log(this.$route.params.id);
          this.$http.get("http://localhost:3000/api/getBlogById",{params:{id:this.$route.params.id}}).then((res)=>{
            this.blog = res.data.message[0]
          })
      },
      methods:{
        updateBlog:function () {
          this.$http.post("http://localhost:3000/api/updateBlog",this.blog,{emulateJSON:true}).then((res)=>{
            var result = res.data;
            if(result.err_code==200){
              alert(result.message);
            }
          }).then((r)=>{
            console.log("请求失败的处理")
          })
        }
      }
    }
</script>

<style scoped>
.blog-update{
  width: 80%;
  margin: auto;
}
</style>

数据库

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
扫码加微信