Django + Vue 的测试平台

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: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

第一部分:基础知识

  1. 模板
<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>
  1. 引用模板
<!-- 展示模板 -->
<template>
  <div id="app">
    <test></test>
  </div>
</template>
 
<script>
// 导入组件
import Test from './components/test'
 
export default {
  name: 'app',
  components: {
    Test
  }
}
</script>
<!-- 样式代码 -->
<style>
</style>
  1. 基础语法
  • v-if
  • v-else
  • v-for
  • v-on
  1. 基本方法
  • 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
				}
			})
		}
	}
}
  1. 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'
})

  • 入口文件

django的view.py文件制定入口html文件

def index(request):
    return render(request, u'index.html')

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>

效果图暂时不贴。。。。学习整理,稍后更新~

展开阅读全文

没有更多推荐了,返回首页