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. mysql的学习笔记(五)

    1.子查询,出现在其他SQL语句的SELECT子句 SELECT * FROM t1 WHERE col1=(SELECT col2 FROM t2); 第一个SELECT称为外层查询,第二个称为子查 ...

  2. 查看ntp时间是否同步

    nptq -p 命令 ntpq用来监视ntpd操作,ntpq -p查询网络中的NTP服务器,同时显示客户端和每个服务器的关系,也可以用watch实时查看. 位置 标志 含义 remote之前 * 响应 ...

  3. GlideDemo【Glide3.7.0版本的简单使用以及圆角功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo主要记录Glide3.7.0版本的简单运用和实现圆角方案. 效果图 代码分析 Glide的centerCrop()和fit ...

  4. 【Python3爬虫】大众点评爬虫（破解CSS反爬）

    本次爬虫的爬取目标是大众点评上的一些店铺的店铺名称.推荐菜和评分信息. 一.页面分析 进入大众点评,然后选择美食(http://www.dianping.com/wuhan/ch10),可以看到一页有 ...

  5. Springboot整合Elastic-Job

    Elastic-Job是当当网的任务调度开源框架,有以下功能 分布式调度协调 弹性扩容缩容 失效转移 错过执行作业重触发 作业分片一致性,保证同一分片在分布式环境中仅一个执行实例 自诊断并修复分布式不 ...

  6. MySQL via EF6 的试用报告

    1.如何通过 EF6 来连接 MySQL? 2.如何通过 EF6 来实现 CRUD? 2.1.Create 添加 2.2.Retrieve 查询 2.3.Update 修改 2.4.Delete 删除 ...

  7. 使用wepy开发微信小程序01——常用的组件

    1.axio.js 'use strict' import axios from 'axios' import wepyAxiosAdapter from 'wepy-plugin-axios/dis ...

  8. 了解一下 - Base64

    Base64编码是最常见的编码方式(使用64个字符表示任意8bit字节序列),是一种基于64个可打印字符来表示任意二进制数据的方法,是从二进制转换到可见字符的过程. 使用场景 数据加密后通过Base6 ...

  9. 学习笔记—JVM

    JVM结构 JVM总体结构图 类加载子系统与方法区: 类加载子系统负责从文件系统和网络中加载Class信息,加载的类信息存放于一块称为方法区的内存空间. 除了类信息外,方法区中还可能会存放运行时常量池 ...

  10. Scrum笔记

    Scrum的笔记,需要的童鞋拿去,有错漏处请指正,谢谢. 出处:https://www.cnblogs.com/Ryu666/p/9890609.html