网站开发安全性分析/代运营电商公司排行榜

1. Vue 工程

所需前端技术栈：

• Element UI
  网站快速成型工具；Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
  
  Element UI官网链接：https://element.eleme.cn/#/zh-CN

• axios 插件
  Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js
  Axios 使用简单,包尺寸小且提供了易于扩展的接口。
  axios 官网链接 ：https://www.axios-http.cn/docs/intro
  

• Echarts：一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
  官网链接：https://echarts.apache.org/zh/index.html
  

1、执行命令 安装echarts

cnpm install echarts@4.9.0 --save

2、main.js 中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、代码

<template><div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>
<script>export default {name: 'Echarts',mounted(){// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({title: {text: '水果销量统计',left: 'center',top: 20,textStyle: {color: '#555555'}},tooltip: {},xAxis: {data: ["苹果","香蕉","橘子","火龙果","葡萄","西瓜"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [{value: 333,itemStyle: {color: "#3fb1e3"}},{value: 133,itemStyle: {color: "#c4ebad"}},{value: 99,itemStyle: {color: "#c4ebad"}},{value: 222,itemStyle: {color: "#6be6c1"}},{value: 399,itemStyle: {color: "#3fb1e3"}},{value: 123,itemStyle: {color: "#c4ebad"}}]}]});}}
</script>

• App.vue

<template><div id="app"><div id="nav"><router-link to="/add">添加数据</router-link> |<router-link to="/table">数据管理</router-link> |<router-link to="/pie">饼图</router-link> |<router-link to="/bar">柱状图</router-link></div><div style="border:0px solid red;width: 800px;height: 600px;margin-left: 366px;"><router-view/></div></div>
</template><script>export default {name: 'app'
}
</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;}#nav {padding: 30px;}#nav a {font-weight: bold;color: #2c3e50;}#nav a.router-link-exact-active {color: #42b983;}
</style>

• Element UI 表格嵌入图片

<template slot-scope="scope"><img :src="scope.row.icon" style="height: 70px"/>
</template>

• 数据校验

<template><el-form ref="fruitRules" :model="fruit" :rules="rules" label-width="80px" class="demo-ruleForm" style="width: 600px"><el-form-item label="名称" prop="name"><el-input v-model="fruit.name"></el-input></el-form-item><el-form-item label="销量" prop="sale"><el-input v-model.number="fruit.sale"></el-input></el-form-item><el-form-item label="图片" prop="icon"><el-input v-model="fruit.icon"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit('fruitRules')">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form>
</template><script>export default {name: "Add",data() {return {fruit: {name: '',sale: '',icon: ''},rules:{name:[{ required: true, message: '请输入水果名称', trigger: 'blur' }],sale:[{ required: true, message: '请输入销量', trigger: 'blur' },{ type: 'number', message: '销量必须为数字值'}],icon:[{ required: true, message: '请输入图片链接', trigger: 'blur' }]}}},methods: {onSubmit(formName){this.$refs[formName].validate((valid) => {if (valid) {let _this = thisaxios.post('http://localhost:8181/fruit/add',this.fruit).then(function (response) {if(response.data){_this.$alert(_this.fruit.name+'添加成功！', '添加数据', {confirmButtonText: '确定',callback: action => {//跳转到/table_this.$router.push('/table')}});}})}});}}}
</script><style scoped></style>

2. Spring Boot 工程

后端技术栈：

• mybatis-plus
  （简称 MP）是一个 MyBatis (opens new window)的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。
  

• Velocity 模板引擎
  Velocity 是一个基于 java 的模板引擎（template engine）。它允许任何人仅仅简单的使用模板语言（template language）来引用由 java 代码定义的对象。

官网链接：https://velocity.apache.org/index.html

pom.xml 导入 MBP 依赖

<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.2</version>
</dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.3.2</version>
</dependency><dependency><groupId>org.apache.velocity</groupId><artifactId>velocity</artifactId><version>1.7</version>
</dependency>

• 代码生成器

package com.southwind;import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.config.DataSourceConfig;
import com.baomidou.mybatisplus.generator.config.GlobalConfig;
import com.baomidou.mybatisplus.generator.config.PackageConfig;
import com.baomidou.mybatisplus.generator.config.StrategyConfig;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;public class GenerateTest {public static void main(String[] args) {//创建generator对象AutoGenerator autoGenerator = new AutoGenerator();//数据源DataSourceConfig dataSourceConfig = new DataSourceConfig();dataSourceConfig.setDbType(DbType.MYSQL);dataSourceConfig.setDriverName("com.mysql.cj.jdbc.Driver");dataSourceConfig.setUsername("root");dataSourceConfig.setPassword("123456");dataSourceConfig.setUrl("jdbc:mysql://localhost:3306/test11");autoGenerator.setDataSource(dataSourceConfig);//全局配置GlobalConfig globalConfig = new GlobalConfig();globalConfig.setOutputDir(System.getProperty("user.dir")+"/src/main/java");globalConfig.setAuthor("admin");globalConfig.setOpen(false);globalConfig.setServiceName("%sService");autoGenerator.setGlobalConfig(globalConfig);//包信息PackageConfig packageConfig = new PackageConfig();packageConfig.setParent("com.southwind");packageConfig.setEntity("entity");packageConfig.setMapper("mapper");packageConfig.setService("service");packageConfig.setServiceImpl("service.impl");packageConfig.setController("controller");autoGenerator.setPackageInfo(packageConfig);//策略配置StrategyConfig strategyConfig = new StrategyConfig();strategyConfig.setInclude("fruit");strategyConfig.setNaming(NamingStrategy.underline_to_camel);strategyConfig.setColumnNaming(NamingStrategy.underline_to_camel);strategyConfig.setEntityLombokModel(true);autoGenerator.setStrategy(strategyConfig);//运行autoGenerator.execute();}
}

• application.yml

spring:datasource:url: jdbc:mysql://localhost:3306/test11username: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driver
mybatis-plus:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplmapper-locations: classpath:com/southwind/mapper/xml/*.xml
server:port: 8181

• 跨域

package com.southwind.configuration;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CrosConfiguration implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOriginPatterns("*").allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS").allowCredentials(true).maxAge(3600).allowedHeaders("*");}}