版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhanghs11/article/details/84638577
近一年,测试小团队从无到有再被拆,大势所趋,努力过。
停下脚步整理哈字寄,调整心态,继续学习;想想自己的未来,规划回武汉中。
花点了下班时间学习Vue 和 Django,准备优化下测试平台的架构。
前端Vue和后端Django分离
刚开始接触Vue,直接用:https://github.com/ElementUI/element-starter
- 安装Node.js + yarn + npm
- npm run dev
- npm run build
第一部分:基础知识
- 模板
<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>
- 基础语法
- v-if
- v-else
- v-for
- v-on
- 基本方法
- name
- data
- methods
- props
- computed
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
}
})
}
}
}
- vue-router
第二部分:实例
-
目录结构
-
配置文件
webpack.config.js
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'
})
- 入口文件
index.html
<!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实例
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>
效果图暂时不贴。。。。学习整理,稍后更新~