使用vue+django写一个个人版博客(1)
首先 我们先创建一个vue项目 使用 vue init webpack ”项目名称“ 命令 创建完后
该项目基于element来构建的所以需要npm i element-ui -S
然后在main.js里写一下内容
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);new Vue({
el: '#app',
render: h=> h(App)
});
然后我们配置一个发送请求的公共方法，在js里创建request.js 这里需要 npm install axios 和 npm install qs
import axios from 'axios'
import qs from 'qs'
const httpService = axios.create({
baseURL:'http://127.0.0.1:8000',
// timeout:3000
})
httpService.interceptors.request.use(
config => {
if (true) {
// config.headers['User-Token'] = ''
}
return config
},
error => {
Promise.reject(error)
}
)
// respone拦截器
httpService.interceptors.response.use(
response => {
// 统一处理状态
return response.data;
}
)
/*网络请求部分*/
/*
* get请求
* url:请求地址
* params:参数
* */
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'GET',
params: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* post请求
* url:请求地址
* params:参数
* */
export function post(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'POST',
data: qs.stringify(params),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(response => {
console.log(response)
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* 文件上传
* url:请求地址
* params:参数
* */
export function fileUpload(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
export default {
get,
post,
fileUpload
}
文件创建好以后再main.js中配置
import axios from './js/request'
Vue.prototype.$ajax = axios
配置好后 我们以后发送请求就可以直接使用
this.$ajax.post("',{}).then((res) => {
if (res.status == 1) {
} else {
}
})
接下来就是我们的页面的设计和路由配置了
我们在components文件夹下创建home.vue
<template>
<el-container :style="`height:${bodyHeight}px`">
<navCom></navCom>
<el-main>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="searchCon" class="selInp">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
<el-divider></el-divider>
<ul>
<li>
<p class="mainTitle">标题标题</p>
<p class="mainCon">asdasdasdasdasdasdasdsadasdasdasdsadasdasdasdasdasdasdasdsadasdasdasdsadasdsadasdasdasdasdasdsadasdasdasdsadasdsadasdasdasdsadasdasdasdsadasdsadasdasdasdasdasdasdasdsadasdasdasdsadasdsadasdasdasdasdasdsadasdasdasdsadasdsadasdasdasdsadasdasdasdsadasdsadasdsadasdasdasdasdasdsadasdasdasdsadasdsadasdasdasdsadasdasdasdsadasdsad</p>
<p class="mainFoot"><a>作者</a><a>发布时间</a><a>文章类型</a></p>
</li>
</ul>
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</template>
<script>
import navCom from '../components/publicComponent/nav'
import '../css/home.css'
export default {
name: "home",
data() {
return {
bodyHeight:document.body.clientHeight,
searchCon: "",
};
},
methods: {
},
mounted(){
},
components:{
navCom
}
};
</script>
<style scoped>
.el-divider--horizontal{
margin: 15px 0;
}
</style>
其中导航部位的代码可以是共通的所以我们把它提出来作为一个组件使用
在刚刚那个文件夹下创建一个publicComponent文件夹这里我们放入我们的公共组件
在这个文件夹下创建nav.vue
<template>
<div>
<el-header>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item :index="item.id" v-for="(item,i) in menuList" :key="i">{{item.label}}</el-menu-item>
</el-menu>
<p class="funP" v-if="userInfo == null">
<a @click="toLogin">登陆</a>
</p>
<p class="funP" v-else>
<a @click="tg">投稿</a>
<el-divider class="divider" direction="vertical"></el-divider>
<a @click="tg">{{userInfo.nickname}}</a>
<el-divider class="divider" direction="vertical"></el-divider>
<a @click="toLogin">退出</a>
</p>
</el-header>
</div>
</template>
<script>
export default {
data() {
return {
menuList: [
{
label: "html",
id: "1"
},
{
label: "css",
id: "2"
},
{
label: "javascaript",
id: "3"
},
{
label: "vue",
id: "4"
},
{
label: "插件",
id: "5"
}
],
activeIndex: "1",
userInfo:JSON.parse(localStorage.getItem('userInfo'))
};
},
methods:{
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
toLogin() {
this.$router.push({
name: "login"
});
},
tg(){
this.$router.push({
name:'contribution'
})
}
},
mounted(){
}
};
</script>
<style scoped>
.el-header{
height: 102px !important;
padding: 0;
box-shadow: -1px 2px 5px #888888;
margin: 0 0 15px 0;
}
.funP{
padding: 0 10px;
}
</style>
这里放上代码
然后在router文件夹的index.js下配置路由
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
}
]
})
这样我们的一个首页就能运行起来了
下期我们将django的项目创建及数据库的迁移
关注我的关注号回复"博客"获取免费源代码
