项目遇到的一些知识点

vue中使用获取焦点和失去焦点的事件

使用 focus和blur 没有加上on 记住了

去除textarea的默认样式 resize: none;

vue实现登录注册的验证 https://blog.csdn.net/The_Best_Hacker/article/details/82730470

搜索框后期使用 vuex进行组件之间的通信

然后让他占位置

改变网页的背景颜色 设置body 就可以了

轮播图管理

插槽传递值 使用一下

开启mongodb数据

切换到 mogodb数据库 在c盘的 data/db

在这里输入 mongod

连接数据库

重新打开一个cmd窗口 输入 mongo

新建数据库名和用户

use admin
db.createUser(
  {
    user: "mongoUser",
    pwd: "123",
    roles: [ { role: "userAdminAnyDatabase", db: "admin" } ]
  }
)
然后重启  数据库
mongod

使用用户名和密码 连接数据库

mongo --port 27017 -u "mongoUser" -p "123" --authenticationDatabase "admin"

node连接mongodb数据

查看有那些数据库
show dbs
切换到某个数据库
命令: use admin
switched to db admin

安装moongoose

导航栏的显示问题

使用vuex进行状态管理 当进入登陆注册页面的时候 flag为 true 当离开的时候 flag变成false

504就是请求超时了

mongo的数据表的名字 会自动加上s 变成负数

db.posts.stats(); 查看表的结构

db.stats(); 查看数据库

删除某个表的数据

drop.posts.stats();

https://www.cnblogs.com/azhqiang/p/9115148.html

查看表的具体信息内容

mongoDb查看数据库里面的表明

删除某个表

db.users.drop();

https://www.cnblogs.com/knowledgesea/p/4634464.html

定义全局的login请求 方式

将这个请求方式进行封装在common 以此来获取session的值

这样每个地方就可以获取session

vue-cli 故障处理

当缺少某些文件的时候 如果一直安装一些依赖 还是报错 那就删除掉 node-modules

重新 npm install 就可以解决了

vuex的封装使用 https://www.jianshu.com/p/b2b634c77502

mongoose的查询语句

https://blog.csdn.net/dancheng1/article/details/78045303

mongoose返回指定字段进行 查找

User.find({ "username": req.body.username }, 'avatar',
            async function(err, result1) {
                req.session.user = userInfo
                res.status(200).json({
                    err_code: 0,
                    message: 'ok',
                    session: req.session.user,
                    avatar: result1
        })
  })
{ "username": req.body.username } 查询的条件   'avatar' 需要返回的字段

mongoose的查询API具体使用

https://blog.csdn.net/weixin_37823121/article/details/82789228

解决element-ui的日期格式化问题

首先安装 moment

npm install moment --save

在main.js进行全局引入

// 解决element-ui的格式问题
import Moment from 'moment'
Vue.prototype.moment = Moment

element-ui的日期写法

<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 180px;" @change="handle" format="yyyy-MM-dd"></el-date-picker>

函数处理日期

需要在data里面 定义一个 nowtime 变量

handle() {
        this.nowTime = this.moment(this.ruleForm.date1).format('YYYY-MM-DD');
 },

在发送ajax请求的表单上 直接使用 格式化后的数据 this.nowTime

就可以完美的解决表单的问题了

element-ui表格超出是否显示提示的问题

在表格上加入这一句
show-overflow-tooltip="true"

如果不加这一句的话 就可以使用

使用穿透进行一些样式的更改

.el-table/deep/ .cell {
    //设置表格的样式
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

路由的两种传递参数的方式

https://blog.csdn.net/youth_lx/article/details/79780938

这个是路由跳转的传递参数

vue的axios请求传递参数 使用parmas

this.$axios.get("/ajaxurl/welfare/gpa/brand/list", {params: {page: 1,size: 10}})

post请求的传参

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
});

也可以使用这种方式进行传递

this.$axios({
           url: '/api/login',
           method: 'post',
           data: {
           username: this.ruleForm2.name,
           password: this.ruleForm2.pass,
            }
        })
   .then(this.getLoginInfoSucc)
}

后端node获取get传过来的参数 query

使用query进行获取 post请求传递过来的数据使用 第三方插件进行获取

编辑页面需要的注意点

时间的显示问题

在rules和转换格式使用

date1: [{
       type: 'date',
       required: true,
       message: '请选择日期',
       trigger: 'change'
  }]
handle() {
      this.nowTime = this.moment(this.ruleForm.date1).format('YYYY-MM-DD');
  }

在上面的表单上写的prop和表格返回的数据名字一样 进行数据的交互

<el-form-item label="时间" required>
                        <el-form-item prop="time">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.time" style="width: 200px; margin-left: 28px;" @change="handle" format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-form-item>

也就是改成time 下面获取还是用date1

mongoose的一些查询方法 靠谱

https://www.jianshu.com/p/bfa4c4f1143e

获取某个表数据长度

https://www.cnblogs.com/fayin/p/7028466.html 靠谱

router-link 进行跳转

如果遇到一些特殊的标签比如li tr td 之类的需要加上 记住了

<router-link tag="li" :to="/detail/+item.id" v-for="item in recommendList" :key="item.id"