node.js评论列表和添加购物车数据库表创建

2.1:评论列表--发表评论

用户点击新闻列表某一条新闻，看到新闻详细发表评论

-用户输入评论内容

-发表评论 [将用户评论内容保存数据库 xz_comment]

2.2:评论列表--发表评论-开发评论

-查询数据库表 xz_comment[id,content,ctime,nid]

-node.js 创建程序接收评论内容添加

(1)用户请求方式 POST app.post("/addcomment")

(2)请求参数          content,nid

2.1:post获取参数   下载安装第三方模块 body-parser

2.2:post获取参数   配置模块

2.3:post 获取参数  req.body.nid req.body.content

(3)SQL  INSERT INTO xz_comment VALUES(null,?,now(),?)

(4)JSON {code:1,msg:"发表成功"}

用户请求方式 GET	用户请求方式 POST
发送请求参数：最1KB	发送请求参数：不限制
作用:获取服务器数据	作用:向服务器发送数据
场景:分页;详细;	场景:注册;添加;上传图片
安全:较差	安全:较差          HTTPS安全级别高

-脚手架 comment.vue 发表评论

-引入第三方模板 qs

1.1:下载npm i qs 模块

1.2:在main.js 引入qs模块  import qs from 'qs';

1.3:在main.js Vue对象属性  Vue.prototype.qs = qs;

1.4 comment.vue

var postData = this.qs.stringify({

nid:9,

content:"......"

})

this.axios.post("127..", postData).then(result=>{

})

-在comment.vue 添加mint-ui Toast

由Toast只有在comment.vue 等少数组件中使用

(1)在当前组件引入  import {Toast} from "mint-ui"

(2)立即调用        Toast("评论内容不能为空");

-常见错误

(1)Duplicate keys detected: '2'

<div v-for="item in list" :key="item.id"></div>

原因:如果item.id有重复值 2 2

this.list=[] this.pno++

post  this.pno = 1; getMore() [{id:1,img.},{id:2}]

2.3:商品详细

1-创建空组件 src/components/goods/GoodInfo.vue

2-添加访问路径   /GoodInfo

3-添加 card.html 卡片布局

4-创建 src/components/sub/swiperBox.vue 子组件

5*-swiperBox.vue 当父组件调用子组件时传递数组

GoodInfo.vue 商品名称; 价格;数量 1

【添加购物车】

*-获取当前商品编号

GoodList.vue  -> GoodInfo.vue   参数pid

(1)为商品列表中每一张图片绑定点击事件

跳转GoodInfo.vue 组件

参数 ?pid=2

#通用参数从模板传递事件处理函数

<img @click="jumpInfo" :data-lid="item.lid"/>

jumpInfo(e){

var pid = e.target.dataset.lid;

this.$router.push("/GoodInfo?pid="+pid)

}

-发送ajax 获取商品名称 价格

node.js

参数:pid

sql:  SELECT lname,price FROM xz_laptop WHERE lid = ?

json {code:1,data:[]}

GoodInfo.vue

-data:{info:{}}

-methods:{findGood} result.data.data[0]

-created()