将近一个月没有练习了，找到之后果然打不开出了问题
【问题】运行代码打开网页后，发现不能正常登录，一开始还以为是密码记错了，后来发现是数据库没有正常启动，phpstudy中的数据库一直是启动状态，关闭不了。
【解决办法】重启phpstudy之后发现端口占用情况，想起之前的解决办法是卸载重装，太麻烦了，这次试了一下win+r，输入services.msc，找到MySQL80，停止之后，发现PHP里面的也停止了，然后重启之后，数据库正常
1，先重启数据库
2，输入node .\app.js 链接上后台数据库
3、再打开代码，运行npm run serve
之后打开网页可以正常登录
接着171开始学习
一、实现商品内容的添加
先添加一个之前文本的校验，是否都填写完整，然后才能进入到商品内容添加界面
所以要拿到表单的验证对象，对他进行一个验证
通过this.$refs访问到表单的引用addformref，然后调用校验规则，validate
//添加商品
add(){
this.$refs.addFormRef.validate((valid) => {
if (!valid) {
return this.$message.error('请填写必要的表单项！')
}
//执行添加的业务逻辑
})但发现现在页面里还没有整出来表格
补一下170集
二、实现富文本编译器的添加
输入win+r,运行cmd，执行vue ui命令
安装运行依赖
导入main中样式
//导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
//导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme然后进行全局注册
//将富文本编辑器注册为全局组件
Vue.use(VueQuillEditor)然后在add.vue中进行使用这个组件
打开官方文档，找到SPA这个文件，拷贝组件名称，把组件名称放到商品内容里面
<el-tab-pane label="商品内容" name="4">
<!-- 富文本编辑器组件 -->
<!-- 要把输入的文本内容，通过v-model双向绑定到data之中，文本要双向绑定到添加表单身上，在addform里新增一个节点，商品的详情描述 -->
<!-- 商品的详情描述对应的属性字段查看API文档叫good_introduce.默认是空文本 -->
<quill-editor v-model="addForm.goods_introduce"></quill-editor>
</el-tab-pane>
//商品的详情描述
goods_introduce:''
给他加个最小的高度，在全局样式表中
.ql-editor{
min-height: 300px;
}希望在编辑器的下面，放一个添加的按钮
<!-- 添加商品按钮 -->
<el-button type="primary" class="btnAdd">添加商品</el-button>为了验证添加成功了，加一个单击事件，
<el-button type="primary" class="btnAdd" @click="add">添加商品</el-button>只要点击按钮，触发add事件，就打印表单，看表单身上是否有商品内容的属性值
//添加商品
add(){
console.log(this.addForm)
OK
继续回到171，通过表单的预校验之后，准备发起数据请求，在发起数据请求之后，需要对表单里面的数据做一层数据处理。
根据API文档发现，需要对goods_cat的数据由数组变为字符串，但若是直接用addform表单里的goods_cat更改之后会造成歧义。
所以需要进行深拷贝。
三、如何进行深拷贝
安装lodash运行依赖
在add.vue中直接引入，用_进行接受
<script>
import _ from 'lodash'
export default {
//进行深拷贝
const form = _.cloneDeep(this.addForm)
form.goods_cat = form.goods_cat.join(',')
console.log(form)
})这样才不会报错，成功进行转变数值
四、处理动态参数和静态属性
通过查看API文档，发现，还需要对静态属性和动态属性进行转换到attr数组中
//处理动态参数
this.manyTableData.forEach(item =>{
const newInfo = {
attr_id:item.attr_id,
attr_value:item.attr_vals.join(' ')
}
this.addForm.attrs.push(newInfo)
})
//处理静态属性
this.onlyTableData.forEach(item =>{
const newInfo = {attr_id:item.attr_id,
attr_value:item.attr_vals}
this.addForm.attrs.push(newInfo)
})
五、发送请求
//添加商品
add(){
// console.log(this.addForm)
this.$refs.addFormRef.validate( async valid => {
//发起请求，添加商品
//商品的名称，必须是唯一的
const {data:res} = await this.$http.post('goods',form)
if(res.meta.status!==201){
return this.$message.error('添加商品失败')
}
this.$message.success('添加商品成功！')
this.$router.push('/goods')
})
![[docker]笔记-基础配置](https://img-blog.csdnimg.cn/7c85c86f1c074ab6a2a48dc7fad8b2e5.png)
