vue-cli4打造前端组件式开发
django开发数据库和数据接口
采用前后端分离式开发
带数据库,带定位用户,带支付宝
带手机短信验证码开发(注册登陆等)
带购物商城数据库设计教程
带数据接口开发教程,带微信登陆,微信支付,
带正确学习CSS,正确学习VUE的学习方法讲解
涉及到路由，VUEX，vant框架等
带django/python讲解,真正真实项目
完整的手机购物商城系统
前后端分离的全面知识
第一部分：前后端分离开发
1.新建后端项目
2.正确安装node.js等工具
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
百分之80的人不会正确安装Node.js(注意’正确’)否则vue会有问题
windows环境安装vue-cli及webpack并创建vueJs项目
3.新建前端项目
管理员身份在项目目录下运行cmd
vue init webpack frontend
cd frontend
npm run dev
前端地址： http://localhost:8080
后端也可以运行，后端地址： http://127.0.0.1:8000/
前后端工程目录（frontend前端，backend后端，djdyf项目管理）：
在setting.py中配置时区
#修改此处，时间本地化
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False
设置静态文件
STATIC_URL = '/api/static/'
修改项目url.py
alt+回车错误提示
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('backend.urls')), #主路由 ，后面把子路由包进来
]
backenend中新建urls.py
from django.urls import include, path
from backend.views import *
#指向应用的url
urlpatterns = [
path('test/', test), #访问路由then访问函数
]
backend.view中写test函数（创建视图函数）：
from django.http import JsonResponse
from django.shortcuts import render
# Create your views here.
#创建视图函数
def test(request):
return JsonResponse({"status":0,"message":"这是django的后台数据"},
safe=False,
json_dumps_params={'ensure_ascii':False})
#上面创建了一个path，作为前端调用的数据接口，可以创建无数个接口
django项目总url如下：
path('api/', include('backend.urls')), #主路由 ，后面把子路由包进来
后端backend的url如下：
path('test/', test), #访问路由then访问函数
访问时，要用http://127.0.0.1:8000/api/test/
调到这个视图函数test，然后test直接送出json数据
配前端：
C:\Users\行掌天下\PycharmProjects\djdyf\frontend目录下cmd
装好三个包
cnpm install axios -save -dev （异步）
cnpm install --save vant@2.1.1 （最重要）
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
cnpm i babel-plugin-import -D （这个好像有问题，下面错误有提到）
安装vuex：
cnpm install vuex --save
修改frontend下.babelrc文件：
自动按需引入组件
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
修改frontend/src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.prototype.axios= axios;
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
可能报错ReferenceError: Unknown plugin “import” specified in
解决办法：
cnpm install babel-plugin-import --save-dev
测试数据库接口
前端显示页面：
frontend/src/components/HelloWorld.vue
清空HelloWorld.vue，默认显示frontend/index.html
frontend/index.html提供title名字
frontend/src/components/App.vue提供图片
main.js跟其他目录文件的关系：
main.js注册全局变量，全局组件的仓库
npm run dev 运行脚手架之后，App.vue在内存中生成的build.js以Script标签的形式插入index.html
修改frontend/src/components/HelloWorld.vue文件
<template>
<div class="hello">
</div>
</template>
<script>
export default {
name:"HelloWorld",
data(){
return{
msg:"Welcome to your Vue.js App"
};
},
//组件一被创建加载的时候执行异步函数
//前端去调Django服务器上的数据，通过axios.get方式去取接口里面的数据，赋值给data
created() {
this.axios.get( url, '/api/test').then(response => {
this.msg=response.data;
console.log(response.data)
}
)
}
};
</script>
跨域方法：
如果是用vue init webpack name创建的
修改frontend/config/index.js文件，解决跨域问题
//解决跨域问题
proxyTable: {
'/api':{
target:"http://127.0.0.1:8000/api",
changeOright:true,
pathRewrite:{
'^/api':''
}
}
},
重启前后端服务
App.vue根组件中插入HelloWorld组件
插入组件三步奏：
1.引入
2.注册
3.放到div里面展示
<template>
<div id="app">
<img src="./assets/logo.png">
【第三步】 <Helloworld/>
<router-view/>
</div>
</template>
<script>
【第一步】 import HelloWorld from "./components/HelloWorld";
export default {
name: 'App',
【第二步】 components:{
HelloWorld
}
}
</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>
HelloWorld.vue中展示msg：
<template>
<div class="hello">
{{msg}}
</div>
</template>