SpringBoot+vue+Element+resource（一）

最新推荐文章于 2023-07-08 17:03:33 发布
最新推荐文章于 2023-07-08 17:03:33 发布
阅读量802 收藏 1
点赞数
分类专栏： VUE SpringBoot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenguixu/article/details/89708398
版权

前端HTML页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
   <!-- 引入样式 -->
   <link rel="stylesheet" href="../css/element-ui-index.css">
   <link rel="stylesheet" href="../css/corporation.css">
</head>
<body>
     <div id="corporation">
         <template>
          <el-alert
            title="公司管理"
            type="info"
            :closable="false">
          </el-alert>
          <div id="ctable">
                <div id="elSwitch">
                      <!-- 区分有效无效的查询 -->
                    <el-switch
                      v-model="switchIsValidity"
                      active-text="有效"
                      inactive-text="无效"
                      @click.native="switchChangeStatus()">
                  </el-switch>
              </div>
            <el-button-group id="btn-group">
              <el-button type="primary" icon="el-icon-circle-plus" @click="addCorp">新增</el-button>
              <el-button type="primary" icon="el-icon-edit" @click="editCorp">修改</el-button>
              <el-button type="primary" icon="el-icon-delete" @click="delCorp">删除</el-button>
              <el-button type="primary" icon="el-icon-refresh" @click="refreshCorp">刷新</el-button>
            </el-button-group>

          <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            border
            @current-change="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              property="id"
              label="ID"
              width="199"
              align="center">
            </el-table-column>
            <el-table-column
              property="corporationname"
              label="公司名称"
              width="400"
              align="center">
            </el-table-column>
            <el-table-column
              property="corporationvalidity"
              label="是否有效"
              width="200"
              align="center"
              :formatter="formatValidity">
            </el-table-column>
            
          </el-table>
          </div>
          
         
          
          <!-- 新增公司 -->
           <el-dialog
              title="新增公司"
              :visible.sync="addDialogVisible"
              width="30%"
              :before-close="handleClose">
                  <el-form label-width="100px">
                     <el-form-item label="公司名称" prop="corporationName">
                       <el-input v-model="addCorporationName"></el-input>
                      </el-form-item>
                </el-form>
                
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveNewCorp">确 定</el-button>
                  </span>
            </el-dialog>
          
          <!-- 修改公司信息 -->
          <el-dialog
              title="修改公司"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
                  
                  <el-form label-width="100px">
                     <el-form-item label="公司名称" prop="corporationName">
                        <el-input v-model="editCorporationName"></el-input>
                      </el-form-item>
                      <el-form-item label="是否有效" prop="corporationValidity">
                        <el-radio-group v-model="editCorporationValidity">
                          <el-radio :label="1">有效</el-radio>
                          <el-radio :label="0">无效</el-radio>
                        </el-radio-group>
                      </el-form-item>
                </el-form>
    
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEditCorp">确 定</el-button>
                  </span>
            </el-dialog>
          </template>
     </div>
     
    <!-- 必须先引入vue  后使用element-ui -->
    <script src="../js/pit_url.js"></script>
       <script src="../vue/vue.js"></script>
       <script src="../vue/element-ui-index.js"></script>
      <script src="../vue/vue-resource.js"></script>
       <script src="../js/corporation.js"></script>

</body>
</html>

夕冰
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【智慧医疗】Springboot+Vue+Element-UI前后端分离的医疗管理平台
m0_67392661的博客
09-08 4356
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
SpringBoot+vue+ElementUi
cht599700的博客
01-18 852
<template> <div> <h1 align="center">SSM阶段机试，ts={{ ts }}</h1> <!-- 查询条件 --> <el-form style="margin-top: 15px" :inline="true" class="demo-form-inline"> <el-form-item label="客户名称"> <el-in.
SpringBoot+vue+Element+resource（三）
chenguixu的博客
04-30 221
SpringBoot后端代码 package pit.services; import java.util.List; import java.util.Map; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowi...
springboot+vue+element--搭建项目
✨ 欢迎来到【Seal ^_^ 的CSDN博客】！这里是我记录技术心得、分享经验的地方。✨
04-19 1104
springboot工程搭建
Spring Boot + vue-element 开发个人博客项目实战教程（一、项目介绍和规划）
码上言
10-24 1万+
本教程主要是使用SpringBoot+Vue从零搭建自己的个人博客系统，大家可以当做基础的项目来学习。
vue+element+springboot+shiro权限控制
12-07
vue+element+springboot+shiro权限控制,mysql数据库 登录帐号/密码 admin:111111
vue+springboot
qq_15513905的博客
07-05 2296
使用vue+springboot 完成前后端分离，实现查询数据库中的数据并展示 1.创建vue项目，创建springboot项目。 使用指令在黑窗口创建vue项目，执行指令 vue init webpack "项目名" 在创建项目的时候，选择安装路由，router，安装npm 然后还需要安装element-ui axios 以及 qs npm install element-ui -S npm install axios npm install qs 安装完成之后，在main.j.
vue+springboot+element+vue-resource实现文件上传教程
01-21
vue页面设置 <el-upload class=upload-demo action= :before-upload=beforeUpload //上传前操作 :before-remove=beforeRemove //移除钱操作 :multiple=false //禁止多选 :http-request=myUpload //文件...
基于SpringBoot + vue + Element-UI 搭建的个人博客系统.zip
08-16
这是一个使用现代Web技术栈构建的个人博客系统的源代码压缩包，主要采用了SpringBoot后端框架、Vue.js前端框架以及Element-UI组件库。下面将详细解释这三个关键技术和它们在构建博客系统中的应用。 **SpringBoot** ...
【项目实战】手把手教你搭建前后端分离项目 SpringBoot + Vue + Element UI + Mysql
激流丶的博客
07-08 3672
🍉🍉🍉 程序员必须得学会如何搭建一个项目，会了这个技能有很多好处，例如接一些项目，也能挣一点生活费。
基于SpringBoot+Vue+ElementUI的人事管理系统
01-12
基于SpringBoot+MyBatis+Vue+Element的人事管理系统. 包含源代码、数据库DDL SQL、初始化数据SQL等，可以基于此做二次开发，快速搭建自己的业务系统。
spring-boot-vue:spring-boot-vue-element入门实战
05-14
Spring Boot Vue Element入门实战(完结) 最近给朋友做一个大学运动会管理系统，用作教学案例，正好自己也在自学VUE，决定用spring boot vue做一个简单的系统。vue这个前端框架很火，他和传统的Jquery 编程思路完全不一样，Jquery 是事件驱动的，而VUE是数据驱动的。以前写页面经常是通过Jquery 操作各种DOM，而VUE不用对DOM进行操作，直接操作绑定的数据即可。接下来我会利用业余时间，把我学习到的分享给大家，知识纯属自学，如有错误的地方欢迎指出，共同进步！ 入门实战目录 Spring Boot Vue Element入门实战（八）静态列表页面 Spring Boot Vue Element入门实战（九）router路由配置 Spring Boot Vue Element入门实战（十）Vue生命周期 Spring Boot Vue Eleme
纯手工搭建Springboot+vue+elementUI框架
最新发布
04-26
在本项目中，我们主要探讨的是如何纯手工搭建一个基于Spring Boot后端、Vue.js前端以及Element UI组件库的应用框架。这个过程涵盖了多个关键的技术环节，让我们逐一详细讲解。 首先，Spring Boot是Java领域的一个轻...
Springboot+Vue+Element UI+MySQL实现简单的页面验证登录及前后端数据传递
weixin_44260108的博客
03-27 2016
① 使用Vue+Element UI创建简单的登录页面 创建Vue项目: 命令行进入项目文件夹，输入: vue create spring_vue_project(项目名) 启动Vue项目: 进入vue项目文件夹，输入: cd spring_vue_project 启动项目，输入: npm run serve Vue项目文件简单介绍： node_modules: 存包管理的一些依赖，如果项目需要上传到版本控制平台，不建议上传此文件夹（拷贝下来的项目可以通过 npm i 进行下载 publi
springboot+vue+element-ui全栈开发入门--开篇
g1607058603的专栏
02-01 3802
目前流行的“前后端分离”技术足够简单，足够方便，足够易学，也足够完善。 项目所使用的前端技术是：element-ui，文档地址是：http://element.eleme.io/#/zh-CN 一、spring boot spring boot是一种框架。它默认配置了很多框架的使用方式。spring boot整合了所有的框架。 使用spring boot可以方便、快速搭建项...
SpringBoot + Vue (ElementUI)的小例子
小鹏要逆袭的博客
05-14 2186
关于SpringBoot项目的搭建，Vue的环境搭建这里不再中赘述。 1.首先建立数据库表： DROP TABLE IF EXISTS `semester`; CREATE TABLE `semester` ( `id` int(11) NOT NULL AUTO_INCREMENT, `semesterid` char(200) CHARACTER SET utf8 COLLAT...
实验管理系统springboot+vue+element ui项目开发
热门推荐
YKbsmn的博客
03-31 1万+
一、前端开发的环境配置 1.1 安装node.js 首先我们上node.js官网(nodejs.org/zh-cn/)，下载最新的长期版本，直接运行安装完成之后，我们就已经具备了node和npm的环境了。 安装完成之后可以window+r在控制台检查版本信息以及是否安装成功： 1.2 安装vue的环境 window+r打开控制台分别输入以下两条语句，安装淘宝npm，cnpm是为了提高我们安装依赖的速度！！ # 安装淘宝npm npm install -g cnpm --registry=.
Vue+SpringBoot+ElementUI实战学生管理系统-4.后端API编写
老徐的博客只有干货
01-24 765
1.章节介绍 前一片介绍了项目的表结构设计，这一篇编写后端API，需要的朋友可以拿去自己定制。：） 2.获取源码 源码是捐赠方式获取，详细请QQ联系我 ：）！ 3.项目截图 登录页 列表操作 动态图 后端接口设计 登录接口 @RestController @RequestMapping("/api") public class LoginController { @Autowired private UserService userService; @PostMappi
springboot+vue+elementui实现前后端分离的网上商城购物系统
分享技术热点，看天下大事
09-14 2280
一、前言介绍文末获取源码开发语言：Java框架：springbootJDK版本：JDK1.8服务器：tomcat7数据库：mysql 5.7/8.0数据库工具：Navicat11开发软件：eclipse/myeclipse/ideaMaven包：Maven3.3.9浏览器：谷歌浏览器一、前言介绍本网上商城购物系统采用的数据库是Mysql，使用springboot框架开发。
springboot+vue+element
03-16
Element是一个基于Vue的UI组件库，提供了丰富的组件和样式，可以帮助开发人员快速构建美观的Web界面。使用Spring Boot和Vue结合使用，可以快速构建一个现代化的Web应用程序，而Element则可以提供丰富的UI组件和样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值