个人练手项目（三）

由于昨天有课，所以进度较慢,今天继续加油鸭

1.实现顶部搜索框的吸顶效果

<div class="inpContainer" id="boxFixed" :class="{'is_fixed' : isFixed}">
	<div class="inp">
		<i class="iconfont search">&#xe651;</i>
		<span>搜索商家、商品名称</span>
	</div>
</div>
复制代码

export default {
	data(){
	  return {
	    isFixed: false,
	    offsetTop:0
	  }
	},
	mounted(){
	  window.addEventListener('scroll',this.initHeight);
	  this.$nextTick( () => {
	    this.offsetTop = document.querySelector('#boxFixed').offsetTop;
	  })
	},
	methods:{
	  initHeight () {
	    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
	    this.isFixed = scrollTop > this.offsetTop ? true : false;
	  },
	},
	destroyed () {
	  window.removeEventListener('scroll', this.handleScroll)
	},
}
复制代码

.is_fixed{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-image: linear-gradient(90deg,#0af,#0085ff);
}
复制代码

2.服务器端的搭建

1.要安装好mongodb，redis，并启动这两个服务

2.首先实现注册功能，会用到qq邮箱服务

3.在server文件夹下，新建dbs文件夹，然后新建config.js，主要是配置了mongodb，redis和qq邮箱smtp服务

export default{
	dbs:'mongodb:127.0.0.1:27017/student',
	redis:{
		get host(){
			return '127.0.0.1'
		},
		get port(){
			return 6379
		}
	},
	// 配置邮箱
	smtp:{
		get host(){
			return 'smtp.qq.com'
		},
		get user(){
			return '**@qq.com'
		},
		get pass(){
			return '你的邮箱秘钥不是QQ密码'
		}
	},
	// 随机生成验证码
	get Code(){
		return ()=>{
			return Math.random().toString(16).slice(2,6).toUpperCase()
		}
	},
	// 验证码过期时间
	get expire(){
		return ()=>{
			return new Date().getTime()+60*60*1000
		}
	}
}
复制代码

4.在dbs文件夹下 mkdir models，然后新建users.js，配置user数据表

import mongoose from 'mongoose'
const Schema = mongoose.Schema
const UserSchema=new Schema({
	username:{
		type: String,
		unique: true,
		require: true
	},
	password:{
		type: String,
		require: true
	},
	email: {
		type: String,
		require: true
	}
})

export default mongoose.model('User', UserSchema)
复制代码

cnpm install mongoose

5.然后编写接口，在server下新建interface/users.js

cnpm install koa-router koa-redis nodemailer

具体注册登录代码可以在github上的login分支中查看

项目地址：github.com/chenrunmiao…