实际项目搭建内容

VUE2前端框架简单搭建

vue和vue-cli安装及脚手架搭建

vue下载和问题解决

创建vue项目

安装好vue和vue-cli后

可以通过以下命令全局设置淘宝镜像，进行加速

npm config set registry httpe://registry.nom.taobao.org

在想要创建的文件夹目录输入cmd

1.执行以下命令创建vue的工程

vue create projectname

可能出现错误：
如果出现vue不是有效命令之类的报错，去系统高级设置检查是否配置环境变量
环境变量
运行出现以下界面，并选择 Manually select features
在这里插入图片描述
设置参数，然后回车创建项目
在这里插入图片描述
创建成功，运行项目
在这里插入图片描述
浏览器输入
http://localhost:8080/ 出现
在这里插入图片描述
至此项目成功创建运行

vue2集成ElementUI

1.ElementUI 安装

组件使用参考官方网站有详细代码,不会操作看官网
element-ui官网

我这里用的是Idea，所以在IDEA 的Terminal输入指令

npm i element-ui -s

成功安装，显示
在这里插入图片描述
且在项目的 pakage.json 文件中可以看到element-ui的依赖
在这里插入图片描述
可能出现错误：
由于以上语句是基于vue2的element，所以如果前面配置选择vue3 这里可能因为版本不对应报错。
在这里插入图片描述
vue3 对应于element-plus,官网安装语句如下

# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus

后期可能会考虑用vue3写出vue3的相关步骤。

在mian.js 里 引入element-ui
在这里插入图片描述

2.Element-vue前端简单实现

Vue2-Vue项目的目录结构和.vue文件的构成
界面效果
在这里插入图片描述

Vue3 前端

以下用前端界面和功能改用vue3 和 ant-design-vue 实现,结合typescript
在这里插入图片描述

全局性或功能性文件

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import {message} from "ant-design-vue";
import axios from "axios";

const app=createApp(App).use(Antd).use(router)//全局注册 Antd Router 只有这样 ant组件样式才会生效 ，router路由跳转才会生效

//挂载全局对象
// 在setup里通过 getCurrentInstance() proxy 使用代替之前的this的功能
app.config.globalProperties.$Ajax=axios;
app.config.globalProperties.$message=message;

app.mount('#app')
//.use(Antd) 注册全部组件

src/api/userCurrenceInstance.ts

/**
用来解决 vue 没有this 需要通过 getCurrentInstance（）获取全局proxy 来实现 全局变量的使用。
在后面 login.vue 和 PerDisTable.vue 文件都会用到
如果是用js写的话，可以不用这个文档，
但是如果用ts写，
const {proxy} =getCurrentInstance() 
语句会报 没有proxy的错
*/

import { ComponentInternalInstance, getCurrentInstance } from 'vue'
export default function useCurrentInstance() {
    const { appContext } = getCurrentInstance() as ComponentInternalInstance
    const proxy = appContext.config.globalProperties
    return {
        proxy
    }
}

登录界面 LoginPage

在这里插入图片描述
这个页面 由LoginPage 和组件login组成
LoginPage的布局的css 参考vben的登录界面。主要是显示这个界面样式，主要登录跳转功能在login组件上。
主要界面布局代码如下：
src/views/LoginPage.vue
在这里插入图片描述
登录跳转功能实现，主要代码来源于以下链接的登录框
登录框
src/components/login.vue
在这里插入图片描述

//此处只放script的代码，template中 只需要在login button 加一个点击事件的触发即刻
<script lang="ts">
import { defineComponent, reactive, computed} from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import router from '../router';
import {message} from "ant-design-vue";
import useCurrentInstance from '../api/useCurrenceInstance';
interface FormState {
  ID: string;
  password: string;
  remember: boolean;
}
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
  }, setup() {
    const formState = reactive<FormState>({
      ID: '',
      password: '',
      remember: true,
    });
    const onFinish = (values: any) => {
      console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };
    const disabled = computed(() => {
      return !(formState.ID && formState.password);
    });
/** 我在ant-design-vue 代码上添加的 start*/
    const { proxy } =useCurrentInstance();
    const login = () => {
     //post 获取服务器数据
     //这里的 proxy.$Ajax 参main.ts 文件
     proxy.$Ajax.post("http://localhost:****/athelete/login",{
          "atheleteid":formState.ID,
          "password":formState.password,
        })
         .then(res=>{
          if(res.data){
          //路由跳转
            router.push({name:"AtheletePage",params:{atheleteid:formState.ID}})
          }
        }
      ).catch(res=>{
           message.error(res.toString()+"用户名或密码错误")
         }

     )

    }


    login()
/** 我在ant-design-vue 代码上添加的 end*/
    return {
      formState,
      login,
      onFinish,
      onFinishFailed,
      disabled,
    };
  },});
  </script>

后台界面 BackgroudPage

主要由 BackGroudPage 和 PerDisTable、SportItemDisTable
由于 PerDisTable、SportItemDisTable 都是表格信息显示，这里只说PerDisTable 页面
在这里插入图片描述

BackGroudPage 主要用于实现后台不同功能组件的切换
后台界面 侧边布局栏
src/views/BackGroudPage.vue
在这里插入图片描述

<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider theme="light" v-model:collapsed="collapsed" collapsible>
      <div class="logo">
        <a-image :width="50"
      src="https://aliyuncdn.antdv.com/vue.png"></a-image></div>
      <!-- 通过 menu v-model 绑定 selectkey参数 菜单被选择时设置key的值-->
      <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="vertical">
        <a-sub-menu key="perMa">
          <template #title>
            <span>
              <user-outlined />
              <span>PerManage</span>
            </span>
          </template>
          <a-menu-item key="per_info">Info</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sportMa">
          <template #title>
            <span>
              <team-outlined />
              <span>SportManage</span>
            </span>
          </template>
          <a-menu-item key="sport_info">Info</a-menu-item>
        </a-sub-menu>

      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" />
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style=" margin: 16px 0" >
          <a-breadcrumb-item>User</a-breadcrumb-item>
          <a-breadcrumb-item>Bill</a-breadcrumb-item>
        </a-breadcrumb>
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
        <!--根据菜单的 key值 通过 v-show true和false决定 那个子组件要显示-->
          <PerDisTable v-show="selectedKeys.toString()==='per_info'?true:false"  ></PerDisTable>
          <SportItemDisTable v-show="selectedKeys.toString()==='sport_info'?true:false" ></SportItemDisTable>

        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

src/component/PerDisTable.vue
table组件

<template>
  <a-table
      :columns="columns"
      :data-source="tableDataRec.data"
      bordered
      size="middle"
      :scroll="{ x: 'calc(700px + 50%)' }"
  >
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'tags'">
        <span>
          <a-tag
              v-for="tag in record.tags"
              :key="tag"
              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite </a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
      </template>
    </template>


  </a-table>
</template>
<script lang="ts">
import type { TableColumnsType } from 'ant-design-vue';
import {defineComponent, reactive} from 'vue';
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
// import axios from 'axios';
import useCurrentInstance from "../../../api/useCurrenceInstance";
// import useCurrentInstance from '/@/api/useCurrenceInstance';



/** 因为是 ant-design-vue 自动绑定数据，所以定义数据源和数据行的时候要对应好，且要和数据库里的数据对应，后期push数据或者修改的时候才不会出错或者不显示*/

//需要在表格中显示的数据 定义
type TableDataType = {
  key:number;
  id:string;
  name: string;

  
};
//数据实例化
let tabledata:TableDataType[]=[];
//表格头，列名与列相关信息设置
const columns: TableColumnsType = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 100,
    fixed: 'left',
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 100,
    fixed: 'left',
    },
  
];

export default defineComponent({
  name:'PerDisTable',
  components:{
    SmileOutlined,
    DownOutlined
  },
  setup() {

    //push数据
    const Datacon = (datas: any): TableDataType[] => {
      for (let i=0;i<datas.length;i++) {
        // console.log(datas[i])
        tabledata.push({
          key:i+1,
          tag:'i',
          id:datas[i]['atheleteid'],
          name:datas[i]['atheletename'],
    
        })
      }
      return tabledata
    }
    //新建一个reactive对象，这里好像只有reactive，ref可以渲染到界面上
    let tableDataRec=reactive({
      data:[{
        key:0,
        id:'string',
        name: 'string',
   

      }]

    })
    const { proxy } =useCurrentInstance();
    /**
     * 用全局axios
     * */
    const insert = () =>{
      proxy.$Ajax.get("http://localhost:5894/athelete/张淑")
          .then((response: { data: any; }) => {
            let datas = response.data
            console.log(datas)
            for (let i = 0; i < datas.length; i++) {
              //直接push好像不好使，要转成对象然后push 才能渲染
              let basicd = Object.assign({}, Datacon(datas)[i])
              tableDataRec.data.push(basicd)
            }
          })

    }
    insert()


    /**原来的axios方法
    const insert = () =>{
      axios.get("http://localhost:5894/athelete/张淑")
          .then((response: { data: any; }) => {
            let datas = response.data
            console.log(datas)
            for (let i = 0; i < datas.length; i++) {
              //直接push好像不好使，要转成对象然后push 才能渲染
              let basicd = Object.assign({}, Datacon(datas)[i])
              tableDataRec.data.push(basicd)
            }
          })

    }
    insert()
    */

    return {
      tableDataRec,
      columns,
    };
  },
});
</script>

SpringBoot

后台这里用的是IDEA，idea的下载安装自己上网找教程吧

springboot框架搭建

1.后台项目创建

在这里插入图片描述
依赖我一般选 ，可以根据自己的配置来，springboot版本推荐小一点比如 2.5.9
Lombok
Spring Web
MySQL Driver
Mybatis Framework
JDBC API
在这里插入图片描述
然后finish，一个项目就创建成功了。

接下来就是一定会报且及其常见的错误

找不到数据源
在这里插入图片描述
这是因为springboot会自动配置数据源

解决1：取消自动配置

在启动文件 就是 src->main->java->com.example.programname 下面的Application加上一句话

@SpringBootApplication(exclude={DataSourceAutoConfiguration.class, HibernateJpaAutoConfiguration.class}
)

这句话用来告诉springboot不用配置数据源
在这里插入图片描述
然后运行

解决2：设置数据源
迎来一个更常见的报错

无清晰映射
在这里插入图片描述
因为刚创建，没有controller，没有映射可访问
新建与Applicaiton文件同级的包controller ，注意目录结构不然还是会报错
在这里插入图片描述
增加一个接口文件
文件里，@RestController 声明是个接口
@RequestMapping 设置映射路径
以上两个注解，和目录结构错了一个以上报错都无法解决。

在这里插入图片描述
以上就可以实现一个简单的网页显示
浏览器输入 http://localhost:8080,端口号看idea
在这里插入图片描述
在这里插入图片描述

MyBatis-Plus集成

MyBatis-Plus官网
不会操作看官网

1.Mybatis-Plus可以查到数据但是返回为null

原来的实体类
原来的实体类
postman的测试结果
postman显示结果

使用驼峰命名
在这里插入图片描述
改数据的时候，记得把涉及到get（）set（）方法一起改了不然会报错。
我的实体类用的是@data注解所有getset是自带的

把实体类数据命名采用驼峰命名
下划线命名： sport_table_id
小驼峰命名：sportTableId
大驼峰命名：SportTableId
关于Mybatis-Plus的使用问题–明明可以查到数据，但是返回空！！

由于我这里实体类和数据库都比较小，所以我直接改我的实体类，如果项目数据量大的话，可以考虑另一种方法，写好Mapper.xml文件，用ResultMap声明好实体类和数据库的映射。不过这两个工作量都挺大的。

2.Mapper中各数据书写与命名

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

通过以上三张图得出结论：
首先 mapper获得的参数是sportevent 这一个对象
插入语句为

@Insert("insert into sportevent(s_Name,s_Time,s_Result)VALUES(#{sName},#{sTime},#{sResult})")

则sportevent（）里面的数据项，对应数据库表的列名
而values() 里的#{} 对应实体类中的命名
由于Mybatis-plus采用驼峰命名，所以输入时要采用全小写，系统自动转为驼峰命名。

Postman测试新增

postman测试接口

postman500 错误解决

idea错误显示
postman错误显示
此处报错原因 没有配置mybatis的xml文件
在application.yml 文件加上mybatis配置

#配置mybatis
mybatis:
  mapper-location: classpath:mapper/*.xml #扫描所有mybatis的xml文件 xml里面写的动态sql

一直没有解决
后来还报别的错误，一直差错
在这里插入图片描述
一直改错一直配置XML文件，直到静下心把代码过了一遍看到一个错误提示，删掉空行后就正确运行了，真的无语自己
在这里插入图片描述
成功运行并查看一下日志
在这里插入图片描述

代码一直改不对的时候，沉下心来看每一个请添加图片描述
标点，拼写，空行，空格，检查清楚，比浪费时间百度三四个小时还没有结果来的快，不然就是浪费时间。
不要忽视每一个warming 和每一处代码标红
即使程序能跑起来

# java # spring # maven
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue