前后端分离,Vue+restfullframework

一、准备

修改源:
    npm config set registry https://registry.npm.taobao.org 

创建脚手架:
    vue init webpack Vue项目名称
    #Install vue-router? Yes
插件:   npm install axios
    axios,发送Ajax请求
    vuex,保存所有组件共用的变量
    vue-cookies,操作cookie

二、流程

1、创建脚手架

npm config set registry https://registry.npm.taobao.org
vue init webpack
#吧route的那一个设置为yes,其他的设置为no

2、启动Vue

cd Vue项目名称
npm run dev

3、显示组件

# 用于点击查看组件
<router-link to="/index">首页</router-link>

# 组件显示的位置
<router-view/>

4、写路由

 1 import Vue from ‘vue‘
 2 import Router from ‘vue-router‘
 3 import Index from ‘@/components/Index‘
 4 import Login from ‘@/components/Login‘
 5 import Course from ‘@/components/Course‘
 6 import Micro from ‘@/components/Micro‘
 7 import News from ‘@/components/News‘
 8 import CourseDetail from ‘@/components/CourseDetail‘
 9 import NotFound from ‘@/components/NotFound‘
10
11 Vue.use(Router)
12
13 export default new Router({
14   routes: [
15     {
16       path: ‘/‘,
17       name: ‘index‘,
18       component: Index
19     },
20     {
21       path: ‘/index‘,
22       name: ‘index‘,
23       component: Index
24     },
25     {
26       path: ‘/course‘,
27       name: ‘course‘,
28       component: Course
29     },
30     {
31       path: ‘/course-detail/:id/‘,
32       name: ‘courseDetail‘,
33       component: CourseDetail
34     },
35     {
36       path: ‘/micro‘,
37       name: ‘micro‘,
38       component: Micro
39     },
40     {
41       path: ‘/news‘,
42       name: ‘news‘,
43       component: News
44     },
45     {
46       path: ‘/login‘,
47       name: ‘login‘,
48       component: Login
49     },
50     {
51       path: ‘*‘,
52       component: NotFound
53     }
54   ],
55   mode: ‘history‘
56 })

 1 # 定义路由
 2                     {
 3                       path: ‘/course-detail/:id/‘,
 4                       name: ‘courseDetail‘,
 5                       component: CourseDetail
 6                     },
 7                     {
 8                       path: ‘/login‘,
 9                       name: ‘login‘,
10                       component: Login
11                     },
12                     {
13                       path: ‘*‘,
14                       component: NotFound
15                     }
16
17
18                 # router-link参数
19                     <router-link :to="{‘path‘:‘/course-detail/‘+item.id }">{{item.name}}</router-link>
20                     <router-link to="/index">首页</router-link>
21
22                 # 获取传过来的参数
23                     this.$route.params.id
24                 # 重定向
25                     this.$router.push(‘/index‘)
26                 

注意:

如果不想在url显示#,可以在路由里面加上这样一个参数

  mode: ‘history‘

5、写组件

 1 <template>
 2
 3   <div>
 4     <h1>登录页面</h1>
 5     <div>
 6       <input type="text" v-model="username" placeholder="用户名">
 7       <input type="text" v-model="password" placeholder="密码">
 8       <a @click="doLogin">提交</a>
 9     </div>
10   </div>
11 </template>
12
13 <script>
14
15 export default {
16   # 定义局部字段
17   data () {
18     return {
19       username: ‘‘,
20       password: ‘‘
21     }
22   },
23   # 加载时执行
24   mounted:function(){
25   },
26   # 定义局部方法
27   methods:{
28     doLogin() {
29       var that = this
30       this.$axios.request({
31         url: ‘http://127.0.0.1:8000/login/‘,
32         method: ‘POST‘,
33         data: {
34           username: this.username,
35           password: this.password
36         },
37         responseType: ‘json‘
38       }).then(function (response) {
39         console.log(response.data)
40         // 找到全局变量,把用户名和token赋值到其中。
41         that.$store.commit(‘saveToken‘,response.data)
42         // 重定向到index
43         that.$router.push(‘/index‘)
44       })
45     }
46   }
47 }
48 </script>
49
50 <!-- Add "scoped" attribute to limit CSS to this component only -->
51 <style scoped>
52
53 </style>

6、发送ajax请求:axios

#发送ajax请求需要安装axios组件
npm install axios

 1 npm install axios
 2
 3 main.js
 4     import Vue from ‘vue‘
 5     import App from ‘./App‘
 6     import router from ‘./router‘
 7
 8     import axios from ‘axios‘
 9
10     Vue.prototype.$axios = axios
11
12     Vue.config.productionTip = false
13     ...
14
15 组件使用:
16     this.$axios.request({
17     url: ‘http://127.0.0.1:8000/login/‘,
18     method: ‘POST‘,
19     data: {
20       username: this.username,
21       password: this.password
22     },
23     responseType: ‘json‘
24   }).then(function (response) {
25     console.log(response.data)
26
27     that.$router.push(‘/index‘)
28   })
29
30 PS:重定向 that.$router.push(‘/index‘)

7、vuex:保存所有组件共用的变量

安装
npm install vuex

如果想用vuex需要做这么几件事:

  • a、先创建一个文件夹,store----store.js
  • b、要先使用就先导入
  • c、实例化一个对象,并且让别人可以用
  • d、这样每一个组件都可以用username和token了

 1 npm install vuex
 2
 3 main.js
 4 import Vue from ‘vue‘
 5 import App from ‘./App‘
 6 import router from ‘./router‘
 7 import axios from ‘axios‘
 8
 9 import store from ‘./store/store‘    # vuex
10
11 Vue.prototype.$axios = axios
12
13 Vue.config.productionTip = false
14
15 /* eslint-disable no-new */
16 new Vue({
17   el: ‘#app‘,
18   store,                            # vuex
19   router,
20   components: { App },
21   template: ‘<App/>‘
22 })
23
24 src/store/store.js
25 import Vue from ‘vue‘
26 import Vuex from ‘vuex‘
27 import Cookie from ‘vue-cookies‘
28
29 Vue.use(Vuex)
30
31 export default new Vuex.Store({
32   // 组件中通过 this.$store.state.username 调用
33   state: {
34     username: Cookie.get(‘username‘),
35     token: Cookie.get(‘token‘)
36   },
37   mutations: {
38     // 组件中通过 this.$store.commit(参数)  调用
39     saveToken: function (state, data) {
40       state.username = data.username
41       state.token = data.token
42       Cookie.set(‘username‘, data.username, ‘20min‘)
43       Cookie.set(‘token‘, data.token, ‘20min‘)
44
45     },
46     clearToken: function (state) {
47       state.username = null
48       state.token = null
49       Cookie.remove(‘username‘)
50       Cookie.remove(‘token‘)
51     }
52   }
53 })

8、vue-cookies:操作cookie

安装
npm install vue-cookies

 1 npm install vue-cookies
 2
 3
 4 Cookie.get(‘username‘)
 5
 6 Cookie.set(‘username‘, data.username, ‘20min‘)
 7 Cookie.remove(‘username‘)
 8
 9
10 src/store/store.js
11 import Vue from ‘vue‘
12 import Vuex from ‘vuex‘
13 import Cookie from ‘vue-cookies‘    # vue-cookies
14
15 Vue.use(Vuex)
16
17 export default new Vuex.Store({
18   // 组件中通过 this.$store.state.username 调用
19   state: {
20     username: Cookie.get(‘username‘),    # vue-cookies
21     token: Cookie.get(‘token‘)            # vue-cookies
22   },
23   mutations: {
24     // 组件中通过 this.$store.commit(参数)  调用
25     saveToken: function (state, data) {
26       state.username = data.username
27       state.token = data.token
28       Cookie.set(‘username‘, data.username, ‘20min‘)    # vue-cookies
29       Cookie.set(‘token‘, data.token, ‘20min‘)
30
31     },
32     clearToken: function (state) {
33       state.username = null
34       state.token = null
35       Cookie.remove(‘username‘)    # vue-cookies
36       Cookie.remove(‘token‘)
37     }
38   }
39 })

三、代码实现

前端代码:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <link rel="stylesheet" href="./static/bootstrap-3.3.7-dist/css/bootstrap.css">
 7     <script src="./static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
 8
 9     <title>s6vue</title>
10   </head>
11   <body>
12     <div id="app"></div>
13     <!-- built files will be auto injected -->
14   </body>
15 </html>

index.html

 1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 import Vue from ‘vue‘
 4 import App from ‘./App‘
 5 import router from ‘./router‘
 6 import store from ‘./store/store‘  //
 7 import axios from ‘axios‘    // 要是用axios,就得先导入
 8 Vue.prototype.$axios = axios  //注册,以后就可以用$axios来定义了
 9
10 Vue.config.productionTip = false
11
12 /* eslint-disable no-new */
13 new Vue({
14   el: ‘#app‘,
15   store,
16   router,
17   components: { App },
18   template: ‘<App/>‘
19 })

main.js

 1 <template>
 2   <div id="app">
 3     <!--首页里面永远是固定的东西-->
 4     <ul class="nav nav-tabs">
 5       <li><router-link to="/index">首页</router-link>  <!--用于点击查看组件--></li>
 6       <li><router-link to="/micro">学位课</router-link>  <!--用于点击查看组件--></li>
 7       <li><router-link to="/course">课程</router-link></li>  <!--用于点击查看组件-->
 8       <li><router-link to="/news">深科技</router-link></li>  <!--用于点击查看组件-->
 9       <!--如果已经登录了,就不用在登录了,在页面还是显示当前用户和注销,如果没有登录就显示登录-->
10       <li v-if="this.$store.state.username">
11         <span><a>欢迎{{ this.$store.state.username }}登录</a></span>
12         <span><a @click="logout()">注销</a></span>
13       </li>
14       <li v-else=""> <router-link to="/login">登录</router-link></li>
15     </ul>
16    <router-view/>  <!--组件显示的位置-->
17   </div>
18 </template>
19
20 <script>
21 export default {
22   name: ‘App‘,
23   methods:{
24     logout(){
25       this.$store.state.username=‘‘
26       this.$store.state.token=‘‘
27     }
28   }
29 }
30 </script>
31
32 <style>
33
34
35 </style>

app.vue

 1 import Vue from ‘vue‘
 2 import Router from ‘vue-router‘
 3 import HelloWorld from ‘@/components/HelloWorld‘
 4 import Index from ‘@/components/Index‘
 5 import Login from ‘@/components/Login‘
 6 import Micro from ‘@/components/Micro‘
 7 import News from ‘@/components/News‘
 8 import Course from ‘@/components/Course‘
 9 import CourseDetail from ‘@/components/CourseDetail‘
10 import NotFound from ‘@/components/NotFound‘
11
12
13
14 Vue.use(Router)
15
16 export default new Router({
17   routes: [
18     {
19       path: ‘/‘,
20       name: ‘HelloWorld‘,
21       component: HelloWorld
22     },
23     {
24       path: ‘/index‘,
25       name: ‘index‘,
26       component: Index
27     },
28      {
29       path: ‘/login‘,
30       name: ‘Login‘,
31       component: Login
32     },
33      {
34       path: ‘/course‘,
35       name: ‘Course‘,
36       component: Course
37     },
38      {
39       path: ‘/course-detail/:id/‘,
40       name: ‘CourseDetail‘,
41       component: CourseDetail
42     },
43      {
44       path: ‘/micro/‘,
45       name: ‘Micro‘,
46       component: Micro
47     },
48     {
49       path: ‘/course-detail/:id/‘,
50       name: ‘CourseDetail‘,
51       component: CourseDetail
52     },
53      {
54       path: ‘/news/‘,
55       name: ‘News‘,
56       component: News
57     },
58     {
59       path: ‘*‘,
60       component: NotFound
61     }
62   ],
63   mode:‘history‘
64 })

router ---index.js

组件components

 1 <template>
 2   <div class="hello">
 3       <h1>{{ msg }}</h1>
 4   </div>
 5 </template>
 6
 7 <script>
 8 export default {
 9   name: ‘index‘,
10   data () {
11     return {
12       msg:"这里是首页"
13     }
14   }
15 }
16 </script>
17
18 <!-- Add "scoped" attribute to limit CSS to this component only -->
19 <style>
20
21 </style>

Index.vue

 1 <template>
 2   <div class="">
 3     <h2>登录页面</h2>
 4     <p>用户名:<input type="text" placeholder="username" v-model="username"></p>
 5     <p>密码:<input type="text" placeholder="password" v-model="password"></p>
 6     <button><a @click="DoLogin()">提交</a></button>
 7   </div>
 8 </template>
 9
10 <script>
11 export default {
12   name: ‘index‘,
13   data () {
14     return {
15       username: "",
16       password: ""
17     }
18   },
19     methods:{
20       DoLogin (){
21           var that = this
22 //          console.log(this.$axios);
23           this.$axios.request({  //发送axios请求
24             url:‘http://127.0.0.1:8082/login/‘, //请求路径
25             method:"POST",//请求方式
26             data:{   //要发送 的数据
27               username:this.username,
28               password:this.password
29             },
30             responseType:‘json‘  //期望返回的类型是json的格式
31           }).then(function (response) {  //吧返回的结果交给回调函数处理
32             //登录成功之后,找到全局变量,吧用户名和token赋值到其中
33             that.$store.commit(‘saveToken‘,response.data);
34             //重定向(登录成功之后让跳转到index页面)
35               that.$router.push(‘/index‘)
36               //为什么不直接用this呢?这里的this代表的是$axios,用that他代指的是整个Vue对象
37           })
38       }
39     }
40
41 }
42 </script>
43
44 <!-- Add "scoped" attribute to limit CSS to this component only -->
45 <style>
46
47 </style>

Login.vue

 1 <template>
 2   <div class="">
 3       <ul>
 4         <li v-for="item in courseList">
 5           <router-link :to="{‘path‘:‘/course-detail/‘+item.id}">{{item.name}}</router-link>
 6         </li>
 7       </ul>
 8   </div>
 9 </template>
10
11 <script>
12 export default {
13   name: ‘index‘,
14   data () {
15     return {
16       msg:‘课程页面‘,
17       courseList:[]
18     }
19   },
20    mounted:function () {
21       //当组件一加载的时候就应该去数据库去获取数据
22       this.initCourses()
23   },
24   methods:{
25     initCourses:function () {
26       var that = this
27       this.$axios.request({
28           url:‘http://127.0.0.1:8082/course/‘,
29           method:"GET"
30       }).then(function (response) {
31         console.log(response);
32         that.courseList = response.data.courseList  //吧从数据库取的数据赋值到courseList列表里面
33       })
34     }
35   }
36
37 }
38
39 </script>
40
41 <!-- Add "scoped" attribute to limit CSS to this component only -->
42 <style>
43
44 </style>

course.vue

 1 <template>
 2   <div class="hello">
 3     <div>课程详细</div>
 4     <h3>{{ title }}</h3>
 5     <h3>{{ summary }}</h3>
 6   </div>
 7 </template>
 8
 9 <script>
10 export default {
11   name: ‘HelloWorld‘,
12   data () {
13     return {
14       title:‘‘,
15       summary:‘‘
16     }
17   },
18   mounted:function () {
19     //当组件一加载就执行的函数
20     this.initCoursesDetail()
21   },
22   methods:{
23     initCoursesDetail(){
24       var nid = this.$route.params.id  //获取id
25       var that = this
26       var url = ‘http://127.0.0.1:8082/course/‘ + nid + ‘.json‘
27       this.$axios.request({
28         url:url,
29         methods:‘GET‘,
30         responseType:‘json‘
31       }).then(function (response) {
32         console.log(response)
33         that.title = response.data.title;
34         that.summary = response.data.summary
35       })
36     }
37   }
38 }
39 </script>
40
41 <!-- Add "scoped" attribute to limit CSS to this component only -->
42 <style scoped>
43
44 </style>

CoursesDetail

 1 <template>
 2   <div class="hello">
 3     <h2>欢迎报名学位课</h2>
 4   </div>
 5 </template>
 6
 7 <script>
 8 export default {
 9   name: ‘HelloWorld‘,
10   data () {
11     return {
12       msg: ‘Welcome to Your Vue.js App‘
13     }
14   }
15 }
16 </script>
17
18 <!-- Add "scoped" attribute to limit CSS to this component only -->
19 <style scoped>
20 h1, h2 {
21   font-weight: normal;
22 }
23 ul {
24   list-style-type: none;
25   padding: 0;
26 }
27 li {
28   display: inline-block;
29   margin: 0 10px;
30 }
31 a {
32   color: #42b983;
33 }
34 </style>

Micro.vue

 1 <template>
 2   <div class="hello">
 3    <h2>深科技</h2>
 4   </div>
 5 </template>
 6
 7 <script>
 8 export default {
 9   name: ‘HelloWorld‘,
10   data () {
11     return {
12       msg: ‘Welcome to Your Vue.js App‘
13     }
14   }
15 }
16 </script>
17
18 <!-- Add "scoped" attribute to limit CSS to this component only -->
19 <style scoped>
20 h1, h2 {
21   font-weight: normal;
22 }
23 ul {
24   list-style-type: none;
25   padding: 0;
26 }
27 li {
28   display: inline-block;
29   margin: 0 10px;
30 }
31 a {
32   color: #42b983;
33 }
34 </style>

News.vue

 1 <template>
 2   <div class="hello">
 3  <h1>找不到页面</h1>
 4   </div>
 5 </template>
 6
 7 <script>
 8 export default {
 9   name: ‘HelloWorld‘,
10   data () {
11     return {
12       msg: ‘Welcome to Your Vue.js App‘
13     }
14   }
15 }
16 </script>
17
18 <!-- Add "scoped" attribute to limit CSS to this component only -->
19 <style scoped>
20 h1, h2 {
21   font-weight: normal;
22 }
23 ul {
24   list-style-type: none;
25   padding: 0;
26 }
27 li {
28   display: inline-block;
29   margin: 0 10px;
30 }
31 a {
32   color: #42b983;
33 }
34 </style>

NotFound

保存全局使用的变量store

 1 import Vue from ‘vue‘
 2 import Vuex from ‘vuex‘
 3 import Cookie from ‘vue-cookies‘
 4
 5 Vue.use(Vuex)
 6
 7
 8 export default new Vuex.Store({
 9   //组件中通过this.$store.state.username 调用
10   state:{
11     username:Cookie.get(‘username‘),
12     token:Cookie.get(‘token‘)
13   },
14   mutations:{
15     //组件中通过this.$store.commit(参数)调用
16     saveToken:function (state,data) {  //存放用户名和token的函数
17       state.username = data.username   //data代指从后端返回过来的数据
18       state.token = data.token
19       Cookie.set(‘username‘,data.username,‘20min‘)   //吧用户名和token存放到cookie中
20       Cookie.set(‘token‘,data.token,‘20min‘)
21     },
22     //清空token和cookie
23     clearToken:function (state) {
24       state.username=null
25       state.token= null
26       Cookie.remove(‘username‘)
27       Cookie.remove(‘token‘)
28     }
29   }
30 })

store.js

后端代码:

 1 """day145vue和restful配合 URL Configuration
 2
 3 The `urlpatterns` list routes URLs to views. For more information please see:
 4     https://docs.djangoproject.com/en/1.11/topics/http/urls/
 5 Examples:
 6 Function views
 7     1. Add an import:  from my_app import views
 8     2. Add a URL to urlpatterns:  url(r‘^$‘, views.home, name=‘home‘)
 9 Class-based views
10     1. Add an import:  from other_app.views import Home
11     2. Add a URL to urlpatterns:  url(r‘^$‘, Home.as_view(), name=‘home‘)
12 Including another URLconf
13     1. Import the include() function: from django.conf.urls import url, include
14     2. Add a URL to urlpatterns:  url(r‘^blog/‘, include(‘blog.urls‘))
15 """
16 from django.conf.urls import url
17 from django.contrib import admin
18 from api import views
19 urlpatterns = [
20     url(r‘^admin/‘, admin.site.urls),
21     url(r‘^login/‘, views.LoginView.as_view()),
22     url(r‘^course/$‘, views.CourseView.as_view()),
23     url(r‘^course/(?P<pk>\d+)\.(?P<format>[a-z-9]+)$‘, views.CourseView.as_view()),
24 ]

urls.py

 1 from django.shortcuts import render,HttpResponse
 2 from rest_framework.views import APIView
 3 from rest_framework.response import Response
 4 from django.http import JsonResponse
 5
 6
 7 class LoginView(APIView):
 8
 9     def get(self,request,*args,**kwargs):
10         ret = {
11             ‘code‘:111,
12             ‘data‘:‘在知识的海洋里一路向前‘
13         }
14
15         response =  JsonResponse(ret)
16         response[‘Access-Control-Allow-Origin‘]=‘*‘
17         return response
18
19     def post(self,request,*args,**kwargs):
20         print(request.body)  #在body里面有值
21         print(request.POST)   #在post里面是没有值的
22         ret = {
23             ‘code‘:1000,
24             ‘username‘:‘haiyn‘,
25             ‘token‘:‘sdswr3fdfsdfdxqw2fgh‘,
26         }
27         response = JsonResponse(ret)
28         response[‘Access-Control-Allow-Origin‘] = "*"
29         return response
30
31     def options(self, request, *args, **kwargs):
32         response = HttpResponse()
33         response[‘Access-Control-Allow-Origin‘] = ‘*‘
34         response[‘Access-Control-Allow-Headers‘] = ‘*‘
35         # response[‘Access-Control-Allo w-Methods‘] = ‘PUT‘
36         return response
37
38
39 class CourseView(APIView):
40     def get(self,request,*args,**kwargs):
41         print(args,kwargs)
42         pk = kwargs.get(‘pk‘)
43         if pk:
44             print(kwargs.get(‘pk‘))
45             ret = {
46                 ‘title‘: "标题标题标题",
47                 ‘summary‘: ‘老师,太饿了。怎么还不下课‘
48             }
49         else:
50             ret = {
51                 ‘code‘:1000,
52                 ‘courseList‘:[
53                     {‘name‘:‘人生苦短,来学Python‘,‘id‘:1},
54                     {‘name‘:‘32天学会java,欢迎报名‘,‘id‘:2},
55                     {‘name‘:‘人工智能即将统领世界...‘,‘id‘:3},
56                 ]
57             }
58         response= JsonResponse(ret)
59         response[‘Access-Control-Allow-Origin‘] = ‘*‘
60         return response

views.py

原文地址:https://www.cnblogs.com/zhangningyang/p/8447305.html

时间: 2024-10-09 12:32:19

前后端分离,Vue+restfullframework的相关文章

前后端分离————VUE+node(express)

前后端分离----VUE+node(express) vue作为前端的框架,node(express)作为后端的框架.无数据库,使用端口保存数据. VUE: 使用vue-cli构建vue项目(vueapp). npm install -g vue-cli(安装,安装过的就不用了) vue init webpack vueapp axios:(与ajax相似) import axios from 'axios' var url="http://localhost:3000" //expr

前后端分离-Vue

安装nodejs和npm 默认使用国外镜像,下载速度慢,手动改为国内淘宝的(直接在CMD终端执行) npm config set registry https://registry.npm.taobao.org 创建SPA(单页面)应用 原文地址:https://www.cnblogs.com/qifengle1412/p/12081742.html

vue+mockjs 模拟数据,实现前后端分离开发

在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模拟数据返回参与相应的数据交互处理,这样真正实现了前后台的分离开发. 与以往的自己

nodeJS(express4.x)+vue(vue-cli)构建前后端分离详细教程

好想再回到大学宿舍,当时床虽小,房随小,但是心确是满的 ----致  西安工程大学a-114舍友们 转载请注明出处:水车:http://www.cnblogs.com/xuange306/p/6185453.html 没图片的教程都是耍流氓 准备工作: 安装nodejs ---还用我教了? 安装依赖包express4.x  点这里>>>nodeJS搭建本地服务器 安装vue-cli脚手架 点这里>>>vue-cli构建vue项目 这里强调一下,express是后端服务器

前后端分离实践:基于vue实现网站前台的权限管理

Javascript做为当下的热门语言,用途很广泛,从前端到后端处处可见其存在,该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面,为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习. Javascript框架鳞次栉比,但基本原理大致相同,因此选用国内人开发的vue.js进行一个初步的尝试.学习vue.js也一周多的时间了,说起vue的主要用法,无外乎Declarative Rendering.Component System.Client-si

2018 Vue+Django API前后端分离开发电商新技术跨域项目实战

课程目标帮助大家快速入门Django REST framework这一个API框架. 帮助大家详细了解Django REST framework中序列化.视图.路由等模块的使用. 帮助大家使用Django REST framework快速开发一套可用的API服务,并且自动生成API文档.适用人群Python开发工程师,后端开发工程师课程简介目前前后端分离的架构设计越来越流行,前后端通过API来实现数据通信.那如何快速开发一套符合RESTful风格的API呢?Django REST framewo

从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之六 || API项目整体搭建 6.1

书接上文:前几回文章中,我们花了三天的时间简单了解了下接口文档Swagger框架,已经完全解放了我们的以前的Word说明文档,并且可以在线进行调试,而且当项目开始之中,我们可以定义一些空的接口,或者可以返回假数据,这样真正达到了前后端不等待的缺陷,还是很不错的,当然,这离我说的前后端分离还是相差甚远,今天呢,我们就简单搭建下我们的项目架构. 本项目是我自己的一个真实项目,数据都是真实的,之前搭建过一个MVC + EF Code First的项目,本项目就是基于这个了,前一段时间我已经搭建起来了,

从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之七 || API项目整体搭建 6.2 轻量级ORM

代码已上传Github,文末有地址 书接上文:<从壹开始前后端分离[ .NET Core2.0 Api + Vue 2.0 + AOP + 分布式]框架之六 || API项目整体搭建 6.1 仓储>,我们简单的对整体项目进行搭建,用到了项目中常见的仓储模式+面向接口编程,核心的一共是六层,当然你也可以根据自己的需求进行扩展,比如我在其他的项目中会用到Common层,当然我们这个项目接下来也会有,或者我还会添加Task层,主要是作为定时项目使用,我之前用的是Task Schedule,基本能满足

从壹开始前后端分离【 .NET Core2.0 Api + Vue 3.0 + AOP + 分布式】框架之九 || 依赖注入IoC学习 + AOP界面编程初探

代码已上传Github,文末有地址 说接上文,上回说到了<从壹开始前后端分离[ .NET Core2.0 Api + Vue 2.0 + AOP + 分布式]框架之八 || API项目整体搭建 6.3 异步泛型+依赖注入初探>,后来的标题中,我把仓储两个字给去掉了,因为好像大家对这个模式很有不同的看法,嗯~可能还是我学艺不精,没有说到其中的好处,现在在学DDD领域驱动设计相关资料,有了好的灵感再给大家分享吧. 到目前为止我们的项目已经有了基本的雏形,后端其实已经可以搭建自己的接口列表了,框架已

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║ Vue前篇:ES6初体验 &amp; 模块化

缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很感兴趣,嗯~~这一块确实挺枯燥的,不能直接拿来代码跑一下那种,不过还是得说下去,继续加油吧!如果大家对昨天的小demo练习的话,相信现在已经对JS的面向对象写法很熟悉了,如果嵌套字面量定义函数,如何使用this关键字指向.今天呢,主要说一下ES6中的一些特性技巧,然后简单说一下模块化的问题,好啦,开始今天的讲