vue前端开发。。。

最新推荐文章于 2022-10-17 14:02:36 发布

weixin_30767921

最新推荐文章于 2022-10-17 14:02:36 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 java ViewUI

原文链接：http://www.cnblogs.com/ruili07/p/10455595.html

本文详细介绍如何从零开始搭建Vue.js项目，包括环境配置、项目创建、组件使用及与SpringBoot整合部署的方法。涵盖了npm与cnpm的安装、Vue CLI的使用、组件关系解析、页面布局设计以及前后端整合流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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注释。

转载于:https://www.cnblogs.com/ruili07/p/10455595.html