开发流程_易果生鲜_Python实训项目

前端开发

后端开发

前端开发

组件概念

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

VUE对象绑定流程

VUE的绑定语法十分有规律，初学者使用并不困难，首先看一下绑定流程

........
<div id="content">
	{{ message }}
</div>
........
<script src="jquery.min.js"></script>
<script src="vue.min.js"></script>
<script>
	var vue = new Vue({
		el: "#content",
		data: {
			message: "hello world"
		},
		methods: {
			say_hello: function(){
				alert("hello world")
			}	
		}
	})
</script>

el节点

用来指定数据绑定的范围，只有在这个范围之内才可以使用vue绑定范围，采用JQ选择器进行指定。

data节点

data节点就是vue的data节点用作数据绑定，data下的最好是一个对象，对象名取名为当前组件名+info组成，对象下再去写需要绑定的字段信息，这样做的目的是为多个组件之间取相同的字段名称导致影响显示效果。

created节点

初始化节点，用来初始化加载后台数据，是一个功能函数，在页面加载之后自动执行，用来加载页面初始化数据，比如第一页数据。

methods节点

组件在加载时执行的代码可以放到这里，访问method下的方法时必须使用v-on进行绑定，触发函数执行。

v-bind方法

主要用于属性绑定，Vue官方提供了一个简写方式 :bind，我们可以给v-bind:class 一个对象，以动态地切换class。注意：v-bind:class指令可以与普通的class特性共存

<button v-on:click="btnClick">按钮</button>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active: 'active',
      line: 'line',
      isActive: true,
      isLine: true,
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive;
      },
      getClasses: function () {
        return {active: this.isActive, line: this.isLine};
      },
      getClassesArray: function () {
        return [this.active, this.isLine];
      }
    }
  });
</script>

v-if方法

是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

HTML

<div id="app">
    <div v-if=" role == 'admin' || role == 'super_admin' ">您好;admin</div>
    <div v-else-if=" role == 'hr' ">您好：hr</div>
    <div v-else="">您无权访问</div>
</div>

var vm = new Vue({
    el:"#app",
    data:{
        role:"super_admin",
    }
});

v-for方法

当需要将一个数组遍历或枚举一个对象循环显示时候，我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用，如下

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <p v-for="user in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>
  </div>
</body>
<script src="vue.min.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      listObj:[
        {id:1, name:'武松'},
        {id:2, name:'鲁智深'},
        {id:3, name:'林冲'},
        {id:4, name:'宋江'},
        {id:5, name:'时迁'},
        {id:6, name:'李逵'}
      ]
    }
  });
</script>
</html>

v-on 方法

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

后端开发

在配置文件当中设置rest_framework

INSTALLED_APPS = [
    ......
    'rest_framework',
    ......
]

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.SessionAuthentication',  # session认证
        'rest_framework.authentication.BasicAuthentication',   # 基本认证
    )
}

编写序列化文件

class GoodsTypeSerializers(serializers.ModelSerializer):
    class Meta:
        model = GoodsType
        fields = "__all__"

class StoreSerializers(serializers.ModelSerializer):
    class Meta:
        model = Store
        fields = "__all__"

编写CBV

class LoginView(APIView):
    def __init__(self,*args,**kwargs):
        super(LoginView,self).__init__(*args,**kwargs)
        self.result = {
            "code": 200,
            "data": ""
        }

    def get(self,request):
        pass

    def post(self,request):
        username = request._request.POST.get("username")
        password = request._request.POST.get("password")

        obj = QUser.objects.filter(username = username,password = password).first()
        if obj:
            token = make_token(username)
            UToken.objects.update_or_create(user = obj,defaults = {"token": token})
            self.result["data"] = token
        else:
            self.result["code"] = 1001
            self.result["data"] = "用户名或密码错误"
        return JsonResponse(self.result)

编写路由

from django.contrib import admin
from django.urls import path,re_path
from Store.views import GoodsView

from QUser.views import *
urlpatterns = [
    path('admin/', admin.site.urls),
    path('Goods/v1/', GoodsView.as_view()),
    path('User/v1/', QuserView.as_view()),
    path("Auth/v1",LoginView.as_view(),name = "auth"),
    re_path(r'User/v1/(?P<id>\d+)', QuserView.as_view())
]

易果生鲜电商系统