近一年，测试小团队从无到有再被拆，大势所趋，努力过。css
停下脚步整理哈字寄，调整心态，继续学习；想一想本身的将来，规划回武汉中。html
花点了下班时间学习Vue 和 Django，准备优化下测试平台的架构。前端
刚开始接触Vue，直接用：https://github.com/ElementUI/element-startervue
<template>
<div class="test">
<h1>Hi,Vue.js~</h1>
<!-- 获取数据 -->
<h2>{{title}}</h2>
</div>
</template>
<script>
import axios from 'axios'
// 外部能引用
export default {
name:"test"
data(){
return {
title:"Hello Vue.js!"
}
}
}
</script>
// scoped 不影响其它域的内容
<style scoped>
</style>
<!-- 展现模板 -->
<template>
<div id="app">
<test></test>
</div>
</template>
<script>
// 导入组件
import Test from './components/test'
export default {
name: 'app',
components: {
Test
}
}
</script>
<!-- 样式代码 -->
<style>
</style>
import axios from 'axios'
export default {
data(){
return {
products:[],
is_loading:false
}
},
created() {
axios.post('/getPhoneInfo/', {
env: 'Test3'
})
.then((response) => {
this.products = response.data;
console.log(response);
this.is_loading = true;
console.log(this.is_loading);
})
.catch((error) => {
console.log(error);
});
},
methods: {
goDetail(i) {
this.$router.push({
name: 'detail',
query: {
index: i
}
})
}
}
}
目录结构node
配置文件webpack
webpack.config.jsios
const resolve = require('path').resolve
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const url = require('url')
const publicPath = '/blogWeb/web'
module.exports = (options = {}) => ({
entry: {
vendor: './src/vendor',
index: './src/main.js'
},
output: {
// path: resolve(__dirname, '../static/dist'),
path: resolve('../blogWeb/web'),
filename: options.dev ? '[name].js' : '[name].js',
chunkFilename: '[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},
module: {
rules: [{
test: /\.vue$/,
use: ['vue-loader']
},
{
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000
}
}]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
resolve: {
alias: {
'~': resolve(__dirname, 'src')
},
extensions: ['.js', '.vue', '.json', '.css']
},
devServer: {
host: '127.0.0.1',
port: 8010,
proxy: {
'/api/': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
historyApiFallback: {
index: url.parse(options.dev ? '/assets/' : publicPath).pathname
}
},
devtool: options.dev ? '#eval-source-map' : '#source-map'
})
django的view.py文件制定入口html文件git
def index(request):
return render(request, u'index.html')
index.htmlgithub
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue学习</title> </head> <body> <div id="app"></div> </body> </html>
main.js 建立vue-router实例web
import Vue from 'vue/dist/vue.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Index from './Index.vue'
import App from './App.vue'
import Detail from './Detail.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.use(ElementUI)
const routes = [
{ path: '/', component: Index },
{ path: '/index', component: Index },
{ path: '/detail', component: Detail, name: 'detail' }
]
// 3. 建立 router 实例，而后传 `routes` 配置
// 你还能够传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 至关于 routes: routes
})
console.log(router)
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
App.vue
<template> <div> <router-view></router-view> </div> </template> <script> </script> <style> </style>
index.vue
前端post请求，访问后端，拿到数据库的数据，展现在前端页面
<template>
<div id="index">
<div class="container" align="center">
<div v-if="is_loading">
<div v-if="products.length === 0">目前没有库存的中古手机能够卖，真抱歉~</div>
<div v-else>
<table>
<tr bgcolor="#cccccc">
<td width=250>库存手机</td>
<td width=150>品牌/型号</td>
<td width=50>出厂年份</td>
<td>价格</td>
</tr>
<tr v-for="(p, i) in products" :bgcolor="(i%2 === 0 ? '#ccffcc' : '#ffccff')">
<td @click="goDetail(i)">{{p[0]}}</a></td>
<td>{{p[1]}}/{{ p[2]}}</td>
<td>{{p[3]}}</td>
<td>{{p[4]}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return {
products:[],
is_loading:false
}
},
created() {
axios.post('/getPhoneInfo/', {
env: 'Test3'
})
.then((response) => {
this.products = response.data;
console.log(response);
this.is_loading = true;
console.log(this.is_loading);
})
.catch((error) => {
console.log(error);
});
},
methods: {
goDetail(i) {
this.$router.push({
name: 'detail',
query: {
index: i
}
})
}
}
}
</script>
<style>
</style>
detail.vue
<template>
<div id="one" >
<table>
<tr bgcolor="#ccffcc"><td width=250>{{product[0]}}</td></tr>
<tr bgcolor="#ffccff"><td width=250>{{product[1]}}</td></tr>
<tr bgcolor="#ccffcc"><td width=250>{{product[3]}}年出厂</td></tr>
<tr bgcolor="#ffccff"><td width=250>售价：人民币{{product[4]}}元</td></tr>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return {
product:{},
is_loading:false
}
},
created() {
axios.post('/getProductInfo/', {
env: 'Test3',
product_index:this.$route.query.index
})
.then((response) => {
this.product = response.data;
console.log(response);
this.is_loading = true;
console.log(this.is_loading);
})
.catch((error) => {
console.log(error);
});
},
}
</script>
<style>
tr{
align:center;
}
</style>
效果图暂时不贴。。。。学习整理，稍后更新~