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前端开发。。。的更多相关文章

  1. vue前端开发那些事——后端接口.net core web api

    红花还得绿叶陪衬.vue前端开发离不开数据,这数据正来源于请求web api.为什么采用.net core web api呢?因为考虑到跨平台部署的问题.即使眼下部署到window平台,那以后也可以部 ...

  2. vue前端开发那些事——vue开发遇到的问题

    vue web开发并不是孤立的.它需要众多插件的配合以及其它js框架的支持.本篇想把vue web开发的一些问题,拿出来讨论下.  1.web界面采用哪个UI框架?项目中引用了layui框架.引入框架 ...

  3. vue前端开发那些事——vue组件开发

    vue的学习曲线不是很陡(相比其它框架,如anglarjs),官方文档比较全面,分为基础篇和高级篇.我们刚开始学习的时候,肯定像引用jquery那样,先把vue的js引进来,然后学习基础内容.如果仅仅 ...

  4. Vue前端开发规范（山东数漫江湖）

    一.强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: expor ...

  5. vue前端开发那些事——前言

    如上图所示,用vue开发一个小型网站所涉及到的知识点.这只是前端部分已经这么多了.接下来我分解开来说. 1.Node 当我们开发vue项目的时候,首先要安装Node.js,那么我们即使当时不理解为什么 ...

  6. vue前端开发那些事（1）

    如上图所示,用vue开发一个小型网站所涉及到的知识点.这只是前端部分已经这么多了.接下来我分解开来说. 1.Node 当我们开发vue项目的时候,首先要安装Node.js,那么我们即使当时不理解为什么 ...

  7. 《Vue前端开发手册》

    序言 为了统一前端的技术栈问题,技术开发二部规定开发技术必须以Vue为主. 为了更好的规范公司的前端框架,现以我前端架构师为主,编写以下开发规范,如有不当的地方,欢迎批评教育并慢慢改善该开发文档,谢谢 ...

  8. 使用Vue-Cli搭建Ant Design Vue前端开发环境

    如果文章有帮助到你,还请点个赞或留下评论 搭建脚手架 环境准备 nodeJS vue-cli 如果没有安装点击此处查看安装方法 进入 vue ui 1.打开终端,输入命令 vue ui 2.选择项目存 ...

  9. Vue前端挂载对象时一些思考

    最近,在Vue前端调试http请求,无论如何如何也是拦截不了某些http请求.场景是这样的:Java后端组装好Vue对象,然后送到前端,前端通过id来挂载该Vue对象,而该对象中有上传文件或者图片的控 ...

随机推荐

  1. 中缀表达式得到后缀表达式(c++、python实现)

    将中缀表达式转换为后缀表达式的算法思想如下: 从左往右开始扫描中缀表达式 遇到数字加入到后缀表达式 遇到运算符时: 1.若为‘(’,入栈 2.若为’)‘,把栈中的运算符依次加入后缀表达式,直到出现'( ...

  2. GC参考手册 —— GC 调优(工具篇)

    JVM 在程序执行的过程中, 提供了GC行为的原生数据.那么, 我们就可以利用这些原生数据来生成各种报告.原生数据(raw data) 包括: 各个内存池的当前使用情况, 各个内存池的总容量, 每次G ...

  3. 【hashMap】详谈

    官方文档地说明 几个关键的信息:基于Map接口实现.允许null键/值.非同步.不保证有序(比如插入的顺序).也不保证序不随时间变化. 一.概述 HashMap 是一个散列表,它存储的内容是键值对(k ...

  4. 完美解决phpstudy安装后mysql无法启动（无需删除原数据库，无需更改任何配置，无需更改端口）直接共存

    PHPstudy与原Mysql兼容解决 一.前言 今天学习php,当然是要先安装好运行环境了,phpstyudy是一个运行php的集成环境, 一键安装对新手很友好,与时作为一个新手,便跟着教程安装了p ...

  5. Asp.Net进程外Session(状态服务器Session、数据库Session)

    介绍 我们知道,当浏览器关闭,或者网站重启的时候,会话就结束了.即Seesion就丢失了.(当Web.config配置文件改动,哪怕什么内容都不加,仅仅往配置文件中加一个空格都是改we.config变 ...

  6. 为什么要抛弃Pact？如何快速实现契约测试（CDC）

    前言 在前几天的博客中,我转载了一篇文章,其中介绍了契约测试和pact是怎么实施的,的确很有帮助.但我经过研究,其实是pact本身也是有缺陷的,结合我近期在使用的服务型工具和我的实际情况,觉得实现契约 ...

  7. [转]Blue Prism Architecture

    本文转自:https://mindmajix.com/blue-prism-architecture Introduction Automation technology is widely bloo ...

  8. MySQL 笔记整理（18） --为什么这些SQL语句逻辑相同，性能却差异巨大？

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 18) --为什么这些SQL语句逻辑相同,性能却差异巨大? 本篇我们以三 ...

  9. java--基本数据类型的转换（强制转换）

    强制类型的转换 规则: 1.执行算术运算时,低类型(短字节)可以转换为高类型(长字节):例如: int型转换成double型,char型转换成int型等等. 就是用强制类型来实现. 3.强制类型转换语 ...

  10. PHP信号管理

    PHP信号管理   SIGHUP     终止进程     终端线路挂断 SIGINT     终止进程     中断进程 SIGQUIT    建立CORE文件终止进程,并且生成core文件 SIG ...