VUE

npm run serve

v-bind绑定属性 ：

v-on绑定事件 @

v-if 判断 false 不渲染

v-show渲染 隐藏

v-for

<li v-for ="(item,index) of list": key="index">{{item}}</li>

父级向子级传数据

通过属性

<template>
<child :msg="message"></child>
</template>

import Child from "./components.Child" //引入
export default {
  components:{Child},//注册组件
  data(){
    return {
    message:"app.vue data"
    }
  }
}

Child组件

<script>
export default{
  props:["msg"]//msg是属性名
}

这样就可用{{msg}}调用数据

在A中import B,B是子级

子级向父级传送数据用事件

父级App.vue

在子级：

export default{

  props:["msg"],\
  data(){
  return {
    child:"child";
  }
  }
  methods:{
    senData(){
    this.$emit("myevent",this.childData);
    }
  }

}

父级

import Child

<child @myevent="changeData"></child>
export default{
  component:{Child},
  data(){
    return {
      message:"app.vue data",
      childData:" "
    }
  },
  methods:{
    changeData(childData){
      this.childData=childData;
    }
  }
}

非父子级

建一个store.js
export default{
  state:{
    message:"hello vue"
  },
  setStateMessage(str){
    this.state.message=str;
  }
}


A /B 
import store
export default{
  data(){
    return {
      state:store.state;
    }
  },
  methods:{
    changeData(){
    store.setStateMessage("str");
    }
  }
}

计算属性和侦听器

export default{
  data(){
    return {
      price:"1234",
      number:"5678"
    }
  }
  computed:{//计算属性
    message(){
      return this.price*this.number
    }
  }，
  watch:{
    number(val){
      console(val)//val就是number变化后的值
    }
  }
}

增删改查

查： get请求

getData(){
  axios.get("http://localhost:7001/book").then((res)=>{
    this.bookList = res.data.data;
  })
}

中间service层
async getBookList(){
  try{
    const bookList = await this.app.model.Book.findALL();//从数据库中获取数据
    return bookList;
  }catch{
    console.log("获取数据错误")
    return null;
  }
}
获取请求
index(){
  const bookList = await this.ctx.service.book.getBookList();//调用service中的getBookList函数
  this.ctx.body = {
    code:20000,
    message:true,
    data: bookList
  }
}

增 post请求

1.添加页面
vue请求：
 creatBook(){
  this.$router.push("creatBlog") //也就是BookDetail页面
}
在BookDetail页面点击保存（提交）按钮对应的函数：
save(){//有更新时要加个判断
  createBook();
}
createBook(){
  axios.post("http:localhost:7001/book",{
    title:this.title,
    img:this.img,
    md_text:this.md_text,
    html_text:this.html_text
  }).then(()=>{
    this.$router.push("/book")//提交完数据转到book页面
  })
}
2.处理添加
service层

async createBook({
  title,
  img,
  md_text,
  html_text
}){
  try{
    await this.app.model.Book.create({
      title,
      img,
      md_text,
      html_text
    })
    return true;
  }catch(error){
    return false
  }
}
后台获取post的数据
async create(){
  try{
    const body = await this.ctx.request.body;//获取请求数据
    await this.ctx.service.book.createBook(body);
    this.ctx.body = {
      code: 20000,
      message: true
    }
  }catch(error){
    this.ctx.body = {
    code: 50000,
    message:false
    }
  }
}

改 put请求

vue发出请求
updateBook(){
  axios.put("http://localhost:7001/book",{
    title:this.title,
    img:this.img,
    md_text:this.md_text,
    html_text:this.html_text
  }).then(()=>{
    this.$router.push("/Book")
  })
}


后台处理
service层

async updateBook(id,{
  title,
  img,
  md_text,
  html_text
}){
  try{
    await this.app.model.Book.update({
      title,
      img,
      md_text,
      html_text
    },{
      where:{
        id
      }
    })
    return true
  }catch(error){
    console.log(error)
    console.log("更新出错，请稍后再试")
    return false;
  }
}

controaller层
async update(){
  try{
    const body = await this.ctx.request.body;
    const id = await this.ctx.params.id;
    const book = await this.ctx.service.Book.updateBook(id,body)
    this.ctx.body = {
     code:20000,
     message:blog
    }
  }catch(error){
    this.ctx.body = {
     code:30000,
     message:false
    }
  }
}

删 delete请求

vue发出delete请求
deleteBook(id){
  this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{
    confirmButtonText:"确定"，
    cancelButtonText:"取消"，
    type:"warning"
  })
    .then(()=>{
      axios.delete(`http://localhost:7001/Book/${id}`).then(()=>{
        this.getBookList();
      });
    })
    .catch(()=>{
      this.$message({
        type:"info",
        message:"已取消删除"
      })；
    })；
}


后端的service层
async deleteBook(id){
  try{
    await this.app.model.Book.destory({
      where:{
        id
      }
    });
    return truel;
  }catch(error){
     return false;
  }
}

controaller层
async destory(){
  try{
    const id = await this.ctx.params.id;
    await this.ctx.service.deleteBook(id);
    this.ctx.body = {
      code: 20000,
      message:true
    }
  }catch(error){
    this.ctx.body = {
      code: 20000,
      message:false
    }
  }
}