结合Django框架快速搭建Vue项目

Vue.js 目录结构

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>
 
<script>
// 导入组件
import Hello from './components/Hello'
 
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<!-- 样式代码 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

结合Django框架实现登录注册功能

后端：

数据库models.py(使用的是Django自带的db.sqlite3数据库)

class User(models.Model):
    name=models.CharField(max_length=128)
    age=models.IntegerField()
    password=models.CharField(max_length=255)
    pwd=models.CharField(max_length=255)

settings.py配置

INSTALLED_APPS = [
    ...
    'corsheaders'，
    ...
 ]
MIDDLEWARE = [
    ...,
    'corsheaders.middleware.CorsMiddleware',
]
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
.
.
.
LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

USE_TZ = False

下载跨域包

pip install django-cors-headers

views.py展示

from rest_framework.response import Response
from rest_framework.views import APIView
from app01.models import User
from django.contrib.auth.hashers import make_password,check_password
class Register(APIView):
    def post(self,request):
        data=request.data
        if 'name' not in data or 'password' not in data or 'age' not in data:
            res={
                'code':201,
                'msg':'缺少参数'
            }
            return Response(res)
        else:
            name = data.get('name')
            age = data.get('age')
            password = data.get('password')
            pwd = data.get('pwd')
            is_user = User.objects.filter(name=name)
            if is_user:
                res = {
                    'code': 202,
                    'msg': '已注册'
                }
                return Response(res)
            if password !=pwd:
                res = {
                    'code': 203,
                    'msg': '密码不一致'
                }
                return Response(res)
            User.objects.create(name=name,age=age,password=make_password(password),pwd=pwd).save()
            res = {
                'code': 200,
                'msg': '成功'
            }
            return Response(res)
class Login(APIView):
    def post(self, request):
        data = request.data
        if 'name' not in data or 'password' not in data :
            res = {
                'code': 201,
                'msg': '信息不能为空'
            }
            return Response(res)
        else:
            name = data.get('name')
            password = data.get('password')
            is_user = User.objects.filter(name=name)
            if not is_user:
                res = {
                    'code': 202,
                    'msg': '未注册'
                }
                return Response(res)
            if not check_password(password,is_user.first().password):
                res = {
                    'code': 203,
                    'msg': '密码错误'
                }
                return Response(res)
            res = {
                'code': 200,
                'msg': '登录成功',
                'data':{
                    'name':is_user.name,
                    'age':is_user.age
            }
            }
            return Response(res)

配置urls.py

from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('reg/', views.Register.as_view()),
    path('log/', views.Login.as_view()),

]

前端：

创建register.vue

<template>
  <div>
    用户名：<input type="text" v-model="name"><br>
    年龄：<input type="text" v-model="age"><br>
    密码：<input type="password" v-model="password"><br>
    确认密码：<input type="password" v-model="pwd"><br>
    <button @click="reg">注册</button>
    <a href="http://localhost:8080/login">是否前往登录？</a>
  </div>
</template>

<script>
export default {
name:'register',
  data(){
    return{
      name:'',
      age:'',
      password:'',
      pwd:''
    }
  },
  methods:{
  reg(){
    if (this.name=='' || this.password=='' || this.age=='' || this.pwd==''){
      alert('参数不能为空')
    }
else {
      this.axios({
      url:'http://127.0.0.1:8000/reg/',
      method:'post',
      data:{
        name:this.name,
        age:this.age,
        password:this.password,
        pwd:this.pwd
      }
    }).then((res)=>{
    if (res.data.code==200){
      alert('注册成功')
    }
    else {
      alert(res.data.msg)
    }
    })}
  }
  }
}
</script>

<style scoped>

</style>

创建login.vue文件

<template>
  <div>
    用户名:<input type="text" v-model="name"><br>
    密码:<input type="password" v-model="password"><br>
    <button @click="log">登录</button>

    <a href="http://localhost:8080/register">是否前往注册？</a>
  </div>
</template>

<script>
export default {
name:'login',
  data(){
    return{
      name:'',
      password:'',
    }
  },
  methods:{
  log(){
    if (this.name=='' || this.password==''){
      alert('参数不能为空')
    }
    else {this.axios({
      url:'http://127.0.0.1:8000/log/',
      method:'post',
      data:{
        name:this.name,
        password:this.password,
      }
    }).then((res)=>{
      if (res.data.code==200){
      alert('登录成功')
      window.sessionStorage.setItem('name', res.data.name)
      window.location.href='http://localhost:8080/index'
    }
    else {
      alert(res.data.msg)
    }
    })}

  }
  }
}
</script>

<style scoped>

</style>

配置路径

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login'
import register from '@/components/register'
// import index from '@/components/index'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
   {
      path: '/',
      redirect: '/login'
    },
    {
      path:'/register',component:register
    },{
      path:'/login',component:login
    },
  ]
})

下载axios

npm install --save axios  #下载 

main.js配置axios

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.axios = axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})