路飞学城项目

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的使用

posted @ 2020-01-20 10:02  烧刘病  阅读(144)  评论(0编辑  收藏  举报
回到页首