路飞学城项目
1.先从前端Vue看起
vue-router,进入到主页Home.vue
vue-roter
1.mode使用history模式
2.输入'/'重定向到'/home',然后进入到Home组件
3.linkActiveClass:'is-active'//表明连接是否被选中‘is-active’是一个css
4.router-link即跳转页面用
静态指定: :to=“/home”
命名路由:<router-link :to='{name:home}'>//有点类似于别名
5.$router.push({name:'Course'})相当于到哪个页面(推到/course路由)
6.导航守卫router.beforeEach()
Luffy-Header
1.首先进入header页面
Login
1.ajax进行登录验证
2.登录成功
this.$router.go(-1)返回上一个组件
使用localStorage,进行存储
登录的流程是:
1.首先进入Login vue 全局钩子执行GEE的捕捉,从GEE拿到一个验证字符
2.拿到成功之后将校验的数据赋值给validateResult进行二次ajax登录验证!!!
3.发送ajax进行后端验证
1.后端先校验验证码通过后
2.在进行数据库的用户校验并更新token
3.校验成功localStorage缓存到本地
4.再去设置vuex store进行全局状态的设置
5.全局是拿userinfo的token进行校验,比如有的话显示用户的下拉菜单
4.只有登录之后才会显示下拉框
logout
1.清除本地的localstorage
2.执行dispatch方法将userino置为空
3.router.push回到home页面
Home
1.主要是轮播图的展示
2.使用element-ui的走马灯
3.使用了v-for
my_order
0.进行全局守卫的校验要求auth
0.5.进行state getuserInfo 进行user 赋值
1.进入我的订单页面(myroder组件)
2.初始化我的订单页面
3.到后端需要进行token校验
用到缓存
4.go_pay 用到阿里支付 pip install Crypto
Course列表
1.都是通过异步加载进来的
#进入到购物车CART
1.整个购物车的增删改查是redis的操作
2.删除操作使用到了this.$confirm
3.加载购物车loading
购物车有点小bug,价格不能随着修改而修改
acount结算
1.
后端总结
1.购物车是对Redis的增删查
2.使用抛出异常的方式返回code和msg(BaseResponse)
class CommonException(Exception):
def __init__(self, code, msg):
self.error = msg
self.code = code
class BaseResponse(object):
def __init__(self):
self.code = 1000
self.msg = ""
self.data = None
@property
def dict(self):
return self.__dict__
3.登录的验证码使用GEETEST
先进性验证码的校验
再进行用户的数据库校验
成功之后进行Token的设置(前端全局的校验)
4.CORS校验即OPTIONS
5.ApiPay的使用
6.DRF中authentication_classes,permission_classes(注销用户)的使用
7.TOken的全局验证(账单,结算,支付,购物车)
Vue总结
1.vuex的使用 userinfo的使用
2.vue-router的使用
3.element-ui的使用
4.axios的使用