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()