你好！将
vue-
admin-
template 前端模板与 Django 后台对接，需要进行以下步骤：
1. 安装
vue-
admin-
template，创建项目；
2.
配置 Axios，
设置请求拦截器和响应拦截器；
3. 在
vue-
admin-
template 中编写登录页面，
使用 Axios 向 Django 后台发送登录请求；
4. 在 Django 后台编写登录 API 接口；
5. 在
vue-
admin-
template 中编写路由守卫，判断用户是否已经登录；
6. 在
vue-
admin-
template 中编写退出登录的代码；
7. 在 Django 后台创建 View 和 Model。
具体操作步骤如下：
1. 安装
vue-
admin-
template，创建项目
安装
vue-
admin-
template，可以
使用以下命令：
```
vue init
vuejs-
templates/
admin my-project
```
安装完成后，进入项目目录并启动项目：
```
cd my-project
npm install
npm run dev
```
2.
配置 Axios，
设置请求拦截器和响应拦截器
在 `src/utils/request.js` 文件中，
配置 Axios，
设置请求拦截器和响应拦截器：
```
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 创建 Axios 实例
const service = axios.create({
baseURL: process.env.
BASE_API,
timeout: 5000
})
// 请求拦截器
service.interceptors.request.use(
config => {
//
设置请求头中的 Authorization 字段
if (store.getters.token) {
config.headers['Authorization'] = getToken()
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 20000) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error)
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
```
3. 在
vue-
admin-
template 中编写登录页面，
使用 Axios 向 Django 后台发送登录请求
在 `src/views/login/index.
vue` 文件中，编写登录页面，
使用 Axios 向 Django 后台发送登录请求：
```
<
template>
<div class="login-container">
<div class="login-box">
<h2 class="login-title">Login</h2>
<el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="Username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="Password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">Login</el-button>
</el-form-item>
</el-form>
</div>
</div>
</
template>
<script>
import { login } from '@/api/user'
import { setToken } from '@/utils/auth'
export default {
name: 'Login',
data() {
return {
loginForm: {
username: '',
password: ''
},
rules: {
username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
}
}
},
methods: {
async login() {
try {
await this.$refs.loginForm.validate()
const res = await login(this.loginForm)
setToken(res.token)
this.$router.push({ path: '/' })
} catch (error) {
console.log(error)
}
}
}
}
</script>
```
在 `src/api/user.js` 文件中，定义登录接口：
```
import request from '@/utils/request'
export function login(data) {
return request({
url: '/api/login/',
method: 'post',
data
})
}
```
4. 在 Django 后台编写登录 API 接口
在 Django 后台编写登录 API 接口，例如：
```
from django.contrib.auth import authenticate, login
from rest_framework import status
from rest_framework.decorators import api_view
from rest_framework.response import Response
@api_view(['POST'])
def login_view(request):
username = request.data.get('username')
password = request.data.get('password')
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
return Response({'token': 'your_token_here'})
else:
return Response({'error': 'Invalid username or password'}, status=status.HTTP_401_UNAUTHORIZED)
```
5. 在
vue-
admin-
template 中编写路由守卫，判断用户是否已经登录
在 `src/permission.js` 文件中，编写路由守卫，判断用户是否已经登录：
```
import router from './router'
import { getToken } from '@/utils/auth'
const whiteList = ['/login']
router.beforeEach(async(to, from, next) => {
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
} else {
next()
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next(`/login?redirect=${to.path}`)
}
}
})
```
6. 在
vue-
admin-
template 中编写退出登录的代码
在 `src/views/layout/components/Header.
vue` 文件中，编写退出登录的代码：
```
<
template>
<div class="header">
<div class="header-left">
<img src="@/assets/logo.png" alt="" class="logo">
<el-menu class="menu" :default-active="$route.path" mode="horizontal" background-color="#fff" text-color="#333" active-text-color="#409EFF">
<el-menu-item index="/">Dashboard</el-menu-item>
<el-submenu index="user">
<
template slot="title">User</
template>
<el-menu-item index="/user">User List</el-menu-item>
</el-submenu>
</el-menu>
</div>
<div class="header-right">
<el-dropdown trigger="click">
<span class="user-info">
<span class="name">{{ $store
1155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
