仿素士App项目

仿素士App项目（vue框架创建的项目）

使用到的技术栈有:CSS,HTML,JS,vue,node,axios,vueX,mysql,element-ui,less,v-charts,gsap,express等。

首先在github/gitee仓库中新建项目需存放的仓库

创建vue项目

用vue-cli构建项目

链接: https://blog.csdn.net/weixin_42229783/article/details/105012443?utm_medium=distribute.pc_relevant.none-task-blog-utm_term-3&spm=1001.2101.3001.4242.

使用vue ui 可视化创建vue项目

链接: https://blog.csdn.net/wumingid/article/details/104750288?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160732301119725211967295%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=160732301119725211967295&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_click~default-1-104750288.pc_search_result_no_baidu_js&utm_term=vue%E5%8F%AF%E8%A7%86%E5%8C%96%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE&spm=1018.2118.3001.4449.

将vue项目上传到远程仓库

1.初始化（生成.git文件，仅需在新建第一次初始化）

git init

2.新增关联链接（和仓库关联）（第一次连接成功后续可不用再链接）

git remote add origin ssh

3.提交所有的文件到缓存区

git add .

4.提交备注（注明此次提交的内容，可随便备注什么，最好是备注英文）

git commit -m "备注内容" 

5.上传到远程仓库

git push -u origin master/git push origin master/git push

看清楚操作目录
一个项目对应一个仓库

添加仓库成员

安装项目依赖

win+R输入cmd确定进入命令行窗口
直接运行npm install …
或者通过vue ui启动vue可视化面板，安装所需依赖或插件，并加以记录，以免小组其它成员由于缺失某项依赖而报错。
安装完依赖记得在相应的main.js和package-json中进行配置。

实现首页背景视频播放

<video autoplay>
<source src="文件目录" type=video/mp4>
</video>

首页的内容可以直接写在video外部

使用slot插槽轻松复用组件

例：

//定义好样式
<slot name="自定义名称"></slot>

组件复用时改变相应的内容但样式不变

<span slot="自定义名称保持一致"></span>

用express框架搭建后台

先安装express生成器再初始化一个express应用

安装express-generator
npm install express-generator -g

快速搭建项目骨架
express -e 项目名称

在建好的express框架中创建一个db目录，在里面写数据库的连接操作
要先npm install mysql 才能进行数据的链接

制作简易的token拦截

window.sessionStorage.setItem("token",data.token)

在main.js设置axios拦截器进行拦截

axios.interceptors.request.use(config=>{
config.headers.Authorization=window.sessionStorage.getItem('token')
return config
})

然后再登陆成功后的页面中设置生命周期使之页面在被创建时就进行判断是否有正确的token，否则跳回登陆页面

拿到最新的时间

let timer=new Date()
//时间不足两位时添0,月份需要加一
(timer.getMinutes()+'').padStart(2,'0')

es6新增方法参考如下：

聊天框内部滚动之默认滚至最底

首先参照实现内部滚动的几种方法
本项目采用的是将上下两部分固定区域绝对定位，再为页面的body部分设置height：100%以及overflow:hidden,即禁用页面原生的滚动，保证只会显示一屏的内容
需要内部滚动的区域加

overflow-y:scroll,加上高度值

//设置webkit浏览器的私有属性隐藏滚动挑
::-webkit-scrollbar{
display:none;
}

// 在生命周期updated里面写
updated(){
let ele=document.getElementById('需要自动滚动至底部的元素id名称');
ele.scrollTop=ele.scrollHeight;
}

路由传参

//方案一：
this.$router.push({name:'',params:{参数名：值}}）
//接收传递过来的参数 
this.$router.params.参数名

//方案二：
this.$router.push({path:'/路由/${id}'}）
//需要对应路由配置
{path:'/路由/:id',name:'',component: }
//接收参数
this.$route.params.id

//方案三：
this.$router.push({path:'/路由',query:{参数名：值}}）
//接收参数
this.$route.query.参数名

图片水平镜像翻转

transform:scaleX(-1)

图片垂直镜像翻转

transform:scaleY(-1)

过滤指定索引下的数组对象（该方法不改变原数组）

let newArr=list.filter((item,index)=>{
index!=索引值
})

实现表格中文字两端对齐

//在需要对齐的td列上加上
text-align-last:justify;

导入小组其它成员数据库时报错

报错提示：

1273-Unknown collation:'utf8mb4_0900_ai_ci'

//解决办法
//将要导入的表用记事本打开
//将其中的

EIVGINE=InnoDB DEFALLT CHARSET=utf8mbf COLLATE=utf8mb4_unicode_520_ci

//全部修改为

EIVGINE=InnoDB DEFALLT CHARSET=utf8 COLLATE=utf8-general-ci

实现样式中的线性渐变

//其中方向可以不写，默认从上向下
background-image:liner-gradient(方向，颜色1，颜色2，...)

计算日期之间相隔天数

先获得时间的毫秒数

let timer=new Date();
let currentTime=timer.getTime();
//获取两个时间的毫秒数相减然后用的出来的数/1000/60/60/24
//然后向上或者向下取整
//例：向下取整
let days=Math.floor(day);

监听滚动事件(及时销毁）

mounted(){
window.addEventListener("scroll",this.setNavPosition);
},
beforeDestory(){
window.removeEventListener("scroll",this.setNavPosition);
},
methods:{
setNavPosition(){
//监听Y轴滚动变化值
window.pageYoffset;
}
}

实现手机验证码发送(node.js+阿里云短信验证）

略

详细代码参照：

链接: https://gitee.com/jokeroQ/project_sushi.git.