json-server --watch db.json 要和 vue ui 一起开启才有效获取数据!!!
当运行第二步骤 vue ui时 会弹出下面的localhost：8000 但是我们可以先继续安装我们的东西 一次安装完 npm i（install） bootstrap@3 axios vue-axios -S [-S在这里非常重要npm install module_name -S 即 npm install module_name --save 写入dependencies是需要发布到生产环境的npm install module_name -D 即 npm install module_name --save-dev 写入devDependencies里面的插件只用于开发环境，不用于生产环境npm install module_name -g 全局安装(命令行使用)] 安装的可在package.json中查看
user文件夹里面的文件都是cli 脚手架搭建的 非常的方便
这是我们简单的配置，最后创建项目，不保存预设，因为这只是个简单的项目，为了快一点，简小不报错，我们手动 只勾选了babel
如果打包后，能把ES6语法转换为ES5语法，就完美的解决了问题，所以我们需要借助Babel来帮我们实现这样的需求。
创建成功会弹出一个小黑框Projecet created
```javascript
在这里插入代码片<template>
<div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
品牌:
<input ref="bindInput" id="myband" type="text" class="form-control" v-model="band" v-scolor>
</label>
<label>
库存:
<input id="mynum" type="text" class="form-control" v-model="num ">
</label>
<input id="mybtn" type="button" value="添加" class="btn btn-primary" @click="addMsg()" >
<label>
搜索名称关键字：
<input type="text" class="form-control" id="search" v-model="keyword" >
</label>
<input @click="searchMsg()" id="mysearch" type="button" value="搜索" class="btn btn-primary">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>序号</th>
<th>品牌</th>
<th>库存</th>
<th>删除</th>
<th id="sx">时间</th>
</tr>
</thead>
<tbody id="mytbody" >
<!--in 后面加个方法 因为这里有两种情况 关键字和非关键字的情况-->
<tr v-for="(value) in searchMsg(keyword)" :key="value.id">
<td>{{value.id}}</td>
<td>{{value.band}}</td>
<td>{{value.num}}</td>
<td><button @click="delMsg(value.id)"> button</button></td>
<td >{{value.time|parserTime}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
baseURL: 'http://localhost:3000/',
carData: [],
band: "",
num: "",
keyword:"",
}
},
directives:{
'scolor':{
bind(el){
el.style.color="red";
}
}
},
filters:{
parserTime(s){
const date = new Date(s);
const y = date.getFullYear();
const m = date.getMonth()+1;
const d = date.getDate();
const h = date.getHours();
const mi = date.getMinutes();
return `${y}-${m}-${d} ${h}:${mi}`
//解析时间戳 可根据个人喜好更改 不是很完善
}
},
created() {
this.getMsg();
},
mounted(){
//一定要注意mounted节点操作dom的时候 习惯给的时间是在20ms之后;
// vue是数据驱动型 mounted指的是东西放到页面上 呈现到页面上是需要时间的
setTimeout(()=>{
this.$refs.bindInput.focus()}, 20)
},
methods: {
getMsg() {
this.axios({
method: 'get',
url: this.baseURL + 'car'
})
.then(result => {
this.carData = result.data;
// console.log(result)
})
},
addMsg() { //axios 增
console.log(this.$refs.bindInput);
this.axios({
method: 'post',
url: this.baseURL + 'car',
data: {"band": this.band, "num": this.num,"time":Date.now()}
})
.then(result => {
if (result.status == 201) {
this.getMsg()
}
// console.log(result)
})
},
delMsg(cid) { //axios 删 c 是拼音传的开头 意为传入的id 值
this.axios({
method: 'delete',
url: `${this.baseURL}car/${cid}`
})
.then(result => {
if (result.status == 200) {
this.getMsg()
}
// console.log(result)
})
},
searchMsg(k) { //axios 查 k意为keyword 如果关键字为空 则显示所有数据 反之显示新的数据
if (k == "") {
return this.carData;
}
else {
let myNewArray = [];
this.carData.forEach(value => {
if (value.band.includes(k)) {
myNewArray.push(value)
}
});
return myNewArray;
}
}
}
}
</script>
<style scoped>
</style>
```javascript
在这里插入代码片
import Vue from 'vue'
import App from './App.vue'
import '../node_modules/bootstrap/dist/css/bootstrap.css'
import axios from 'axios'
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
最终实现效果，欢迎评论 改善 也可➕1099256274 一起学习噢
