vue前端开发。。。
1. 官网下载 https://nodejs.org/en/
2. 安装cnpm 在命令行： npm install -g cnpm --registry=https://registry.npm.taobao.org
3. cnpm install -g vue-cli 或 npm install -g @vue/cli // 安装cli3.x vue --version // 查询版本是否为3.x
4. 在任意文件夹内创建项目工作空间， vue init webpack my-vue-project
5. 进入项目： cnpm install 或 npm install 安装; cnpm list 查看依赖
6. npm run dev 或 npm run serve
VUE组件关系：
在Index.html中
<body>
<div id=app><\div>
<\body> 在main.js中， 初始化VUE
new Vue({
el: '#app', 挂载元素: 将div id=app 挂载到这
router,
components: { App }, 组件： App.vue组件对元素操作
template: '<app/>' 模板： 使用<app></app>中的内容 替换 <div id=app></div>中的内容
}) 在App.vue内部， <template/> 读取 <script/> 内data()
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<h1>{{ msg }} </h1>
</div>
</template> <script>
export default {
name: 'App'
data(){
return {
msg : 'hello'
}
}
}
</script>
cnpm i -g @vue/cli
npm run serve
增加新页面：
在views新建文件夹以及其.vue文件。 -> 在views/Home 中添加menu进 新页面地址。 -> 在router.js 中将页面添加进路由：import LogicInformation from '@/views/LogicInformation'。
TODO： 页面布局
程序上的说明：
1. 在/api/ .js 构建post或get接口;
export function show_final_dimens(params) {
return Ax.post('/show_final_dimens', params).then(res => res.data);
}
1. 在/view/ .vue中, 需要构建 <style> <template> <script> 三层。
<style>.sqlQuery {
height: 100%;
display: flex;
}
<template>
<div class="sqlQuery">
<el-container>
<el-aside width="auto">
<el-menu
<script>
// @ is an alias to /src
import api from "@/api";
export default {
name: "sqlQuery",
data() {
return {
sql: "",
result: [],
head: [],
menu:[
]
};
},
################################################################################################################
<el-submenu v-for="(item, index) in menu" :key="index" :index="index+''">
menu 在Init方法中被赋值; :index="" 只是页面索引。
v-model="sql.content 双向绑定。
################################################################################################################
// 展示的字段
handleSelect(key, keyPath) {
this.active = key;
this.sql = '';
this.head = []; // 展示的表头
this.table = [];
this.head3 = []; // 维度表的三个字段
this.table3= [];
this.head = res[0].keys_rank.filter(e => e !== 'logic_id' && e !== 'logic_group_id'); // 配置显示的表头
this.editList = res[0].modiable_field.filter(e => e !== 'update_time' && e !== 'create_time'); // 配置可编辑的字段
this.$axios.show_final_dimens({group_id: this.menu[+this.active.split('-')[0]].group_id}).then(res => {}
}
resolveTable3() {
if(this.active.split('-')[1] === '2' || this.active.split("-")[1] === '1') return;
只有在第3个页面, show_middle_logic() 会携带维度表, resolveTable3负责解析这个维度表， 并根据logic_id关联。
}
addRow() 只是增加一行空白行, 配合 change(row) 将更新的内容调入接口。
addRow() 另一种是生成一张弹窗， 供下拉选择。 每次弹窗提交diaglog 都会调用 submit()。
在标签内可直接写判断： <el-button type="primary" size="small" round @click="submitNewTable3" v-if="active.split('-')[1] !== '1'">提交+</el-button>
不懂的地方： change 在 style中的应用。 以及 @selection-change="select" 在select-change时使用select()方法记录数据。
1. 页面切换， 数据保留：
在/Home/index.vue中配置。
<el-main>
<keep-alive>
<router-view include="sqlQuery"></router-view>
</keep-alive>
</el-main>
2. 设置弹窗的窗体：
<el-table
v-if="cur === 'col' || cur === 'col_del'"
:data="tableDialog"
height="50vh"
style="width: 100%"
@selection-change="select"
key="2"
>
################################################################################################################
var m = [{'k':'v'}];
增加[], m.push({'k2':'v2'})
0: {k: "v"}
1: {k2: "v2"}
增加{} m[1]['new'] = 'new'
0: {k: "v"}
1: {k2: "v2", new: "new"}
删除key, delete m['k']
新增列+ 页面上的js代码 也会出现很多空指针问题。
# vue与springboot整合部署到集群
1. 将bi.js中的url写成ip形式。
baseURL: "http://目标地址:9092"
编译项目
npm run build
2. 编写springboot读取静态资源类
@Configuration
public class SpringWebConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
super.addResourceHandlers(registry);
}
}
将dist中的文件复制到resource->static/ 目录下。
3. 重新编译springboot时， 应先将target目录删除。
4. 安全证书问题：
sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target
sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target
java自带的安全证书不受信任
mysql 服务不要使用ssl连接。
创建http认证类: ValidHostName 将其方法加上Bean注释。
vue前端开发。。。的更多相关文章
- vue前端开发那些事——后端接口.net core web api
红花还得绿叶陪衬.vue前端开发离不开数据,这数据正来源于请求web api.为什么采用.net core web api呢?因为考虑到跨平台部署的问题.即使眼下部署到window平台,那以后也可以部 ...
- vue前端开发那些事——vue开发遇到的问题
vue web开发并不是孤立的.它需要众多插件的配合以及其它js框架的支持.本篇想把vue web开发的一些问题,拿出来讨论下. 1.web界面采用哪个UI框架?项目中引用了layui框架.引入框架 ...
- vue前端开发那些事——vue组件开发
vue的学习曲线不是很陡(相比其它框架,如anglarjs),官方文档比较全面,分为基础篇和高级篇.我们刚开始学习的时候,肯定像引用jquery那样,先把vue的js引进来,然后学习基础内容.如果仅仅 ...
- Vue前端开发规范（山东数漫江湖）
一.强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: expor ...
- vue前端开发那些事——前言
如上图所示,用vue开发一个小型网站所涉及到的知识点.这只是前端部分已经这么多了.接下来我分解开来说. 1.Node 当我们开发vue项目的时候,首先要安装Node.js,那么我们即使当时不理解为什么 ...
- vue前端开发那些事（1）
如上图所示,用vue开发一个小型网站所涉及到的知识点.这只是前端部分已经这么多了.接下来我分解开来说. 1.Node 当我们开发vue项目的时候,首先要安装Node.js,那么我们即使当时不理解为什么 ...
- 《Vue前端开发手册》
序言 为了统一前端的技术栈问题,技术开发二部规定开发技术必须以Vue为主. 为了更好的规范公司的前端框架,现以我前端架构师为主,编写以下开发规范,如有不当的地方,欢迎批评教育并慢慢改善该开发文档,谢谢 ...
- 使用Vue-Cli搭建Ant Design Vue前端开发环境
如果文章有帮助到你,还请点个赞或留下评论 搭建脚手架 环境准备 nodeJS vue-cli 如果没有安装点击此处查看安装方法 进入 vue ui 1.打开终端,输入命令 vue ui 2.选择项目存 ...
- Vue前端挂载对象时一些思考
最近,在Vue前端调试http请求,无论如何如何也是拦截不了某些http请求.场景是这样的:Java后端组装好Vue对象,然后送到前端,前端通过id来挂载该Vue对象,而该对象中有上传文件或者图片的控 ...
随机推荐
- 【java线程池】
一.概述 1.线程池的优点 ①降低系统资源消耗,通过重用已存在的线程,降低线程创建和销毁造成的消耗: ②提高系统响应速度,当有任务到达时,无需等待新线程的创建便能立即执行: ③方便线程并发数的管控,线 ...
- 强化学习（三）用动态规划（DP）求解
在强化学习(二)马尔科夫决策过程(MDP)中,我们讨论了用马尔科夫假设来简化强化学习模型的复杂度,这一篇我们在马尔科夫假设和贝尔曼方程的基础上讨论使用动态规划(Dynamic Programming, ...
- 基于MongoDB.Driver的扩展
由于MongoDB.Driver中的Find方法也支持表达式写法,结合[通用查询设计思想]这篇文章中的查询思想,个人基于MongoDB扩展了一些常用的方法. 首先我们从常用的查询开始,由于MongoD ...
- 补习系列(1)-springboot项目基础搭建课
目录 前言 一.基础结构 二.添加代码 三.应用配置 四.日志配置 五.打包部署 小结 前言 springboot 最近火的不行,目前几乎已经是 spring 家族最耀眼的项目了.抛开微服务.技术社区 ...
- Asp.Net.Identity认证不依赖Entity Framework实现方式
Asp.Net.Identity为何物请自行搜索,也可转向此文章http://www.cnblogs.com/shanyou/p/3918178.html 本来微软已经帮我们将授权.认证以及数据库存储 ...
- 关于CSS引入方式的详细见解
关于CSS的发展史这里不做介绍.写博客的原因之一是想帮助那些与我一样喜欢纠结的初入前端的伙伴,希望自己写的帖子能对伙伴有些许帮助:原因之二这些帖子也算自己的一个知识的整理.现在还没有一定的顺序可循,但 ...
- .NET CAD二次开发学习第一天
基于浩辰CAD2019 需求: 开发线转圆简单命令.命令过程:1) 请选择图中直线(要求支持一次选多个):2) 弹出对话框,输入圆的图层名和半径3) 点对话框中确定按钮,结束命令.命令执行效果:所选每 ...
- 【转载】 Sqlserver中通过Select Into语句快速单表备份
在Sqlserver数据库中,备份数据的方式有很多种,可以使用整个数据库备份,也可使用导出包含数据和架构的脚本文件的方式来进行单表或多表数据的备份,其实还有一种Select Into的方式可以快速备份 ...
- MySQL 笔记整理（12） --为什么我的MySQL会“抖”一下？
笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 12) --为什么我的MySQL会“抖”一下? 断更了一段时间,因为这几 ...
- 为什么单线程的Redis这么快？
一. Redis简介 Redis是一个开源的内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 字符串(strings), 散列(hashes), 列表(li ...