黑马2023javaweb-Element案例

最新推荐文章于 2024-01-09 18:13:56 发布
最新推荐文章于 2024-01-09 18:13:56 发布
阅读量297 收藏 3
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sq91fra/article/details/132327520
版权

预期效果

  • 不需要太关注页面布局
    在这里插入图片描述

基本页面布局

1. 创建vue项目，新建views组件（EmpView.vue）

  • 如果建立好了vue项目，直接在views文件夹中添加组件
    在这里插入图片描述
<template>
	<div>
	</div>
</template>
<script>
export default {
	
}
</script>

<style>
</style>

2. 将组件导入App.vue中

  • 一定要注意导入的文件名
<template>
  <div >
    <!-- <element-view></element-view> -->
    <emp-view></emp-view>
  </div>
</template>

<script>
// import elementView from './views/element/ElementView.vue'
import empView from './views/Exam/EmpView.vue'
export default {
  components:
  {
    // elementView
    empView
  },
  data() {
    return {
    }
  },
  methods: {
  },
  mounted() {
  }
}
</script>

<style>
</style>

3. 导入Element，完成基本布局

  • 如果没有导入Element，先在main.js中导入
  • 在组件中完成基本布局，布局代码从官网复制
  • 样式可以自己设置，可以在style标签里设置
<template>
	<div>
		<el-container style="height: 700px; border: 1px solid #eee">
			<el-header id="eHeader" style="font-size: 40px;
	background-color: rgb(238, 241, 246);">智能学习辅助系统</el-header>
			<el-container>
				<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
				</el-aside>
				<el-main></el-main>
			</el-container>
		</el-container>
	</div>
</template>

4. 完成aside和mian的基本布局

<template>
	<div>
		<el-container style="height: 700px; border: 1px solid #eee">
			<el-header id="eHeader" style="font-size: 40px;
	background-color: rgb(238, 241, 246);">智能学习辅助系统</el-header>
			<el-container>
				<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
					<el-menu :default-openeds="['1', '3']">
						<el-submenu index="1">
							<template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
							<el-menu-item-group>
								<el-menu-item index="1-1">部门管理</el-menu-item>
								<el-menu-item index="1-2">员工管理</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-aside>
				<el-main>
					<el-table-column prop="name" label="姓名" width="180"></el-table-column>
					<el-table-column prop="image" label="图像" width="180"></el-table-column>
					<el-table-column prop="gender" label="性别" width="140"></el-table-column>
					<el-table-column prop="job" label="职位" width="140"></el-table-column>
					<el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
					<el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
					<el-table-column label="操作" >
    						<el-button type="primary" size="mini">编辑</el-button>
    						<el-button type="danger" size="mini">删除</el-button>
					</el-table-column>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

5. 定义数据模型

<script>
export default {
	data () {
		return {
			tableData: [],
			searchForm: {
				name: '',
				gender: '',
				job: '',
				entrydate: [],
				updatetime: ''
			}
		}
	}
</script>

页面组件实现

  • 去官网复制粘贴
<template>
	<div>
		<el-container style="height: 700px; border: 1px solid #eee">
			<el-header id="eHeader" style="font-size: 40px;
	background-color: rgb(238, 241, 246);">智能学习辅助系统</el-header>
			<el-container>
				<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
					<el-menu :default-openeds="['1', '3']">
						<el-submenu index="1">
							<template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
							<el-menu-item-group>
								<el-menu-item index="1-1">部门管理</el-menu-item>
								<el-menu-item index="1-2">员工管理</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-aside>
				<el-main>
					<el-table-column prop="name" label="姓名" width="180"></el-table-column>
					<el-table-column prop="image" label="图像" width="180"></el-table-column>
					<el-table-column prop="gender" label="性别" width="140"></el-table-column>
					<el-table-column prop="job" label="职位" width="140"></el-table-column>
					<el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
					<el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
					<el-table-column label="操作" >
    						<el-button type="primary" size="mini">编辑</el-button>
    						<el-button type="danger" size="mini">删除</el-button>
					</el-table-column>
					<!-- 分页 -->
					<el-pagination background layout="sizes,total,prev, pager, next,jumper" :total="1000">
					</el-pagination>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

YApi生成数据

1. 打开yapi官网:https://yapi.pro/

2. 添加并创建项目

  • 名称任意
    在这里插入图片描述

3. 添加接口

  • 接口分类可以自己创建，也可以选择公共分类
  • 接口路径的GET会决定代码的方法
    在这里插入图片描述

4. 注意方法要对应

在这里插入图片描述

5. 设置返回数据

  • 点击导入json

在这里插入图片描述

  • 导入以下数据
{
    "code": 1,
    "message": "success",
    "data": [
        {
            "id": 1,
            "name": "詹姆斯",
            "image": "https://raw.githubusercontent.com/wisdom-zhe/MyPic/img/img/3.jpeg",
            "gender": 1,
            "job": "黄金坦克",
            "entrydate": "2008-05-09",
            "updatetime": "2022-10-01 12:00:00"
        },
        {
            "id": 2,
            "name": "科比",
            "image": "https://raw.githubusercontent.com/wisdom-zhe/MyPic/img/img/2.jpeg",
            "gender": 1,
            "job": "黄金后仰",
            "entrydate": "2012-05-09",
            "updatetime": "2022-10-01 12:00:00"
        },
        {
            "id": 3,
            "name": "库里",
            "image": "https://raw.githubusercontent.com/wisdom-zhe/MyPic/img/img/4.jpeg",
            "gender": 1,
            "job": "黄金射手",
            "entrydate": "2015-05-09",
            "updatetime": "2022-10-01 12:00:00"
        },
        {
            "id": 4,
            "name": "梅西",
            "image": "https://raw.githubusercontent.com/wisdom-zhe/MyPic/img/img/1.jpeg",
            "gender": 1,
            "job": "黄金右脚",
            "entrydate": "2018-05-09",
            "updatetime": "2022-10-01 12:00:00"
        }
    ]
}
  • 保险起见，在高级mock中添加期望,把上面的json复制到boby中(如果没有添加期望，不会返回数据)
    在这里插入图片描述
  • 复制预览中的mock地址,后面axios会用到
    在这里插入图片描述

axios异步加载

  • 在项目目录下安装axios
npm install axios
  • 在组件中导入
import  axios from 'axios';
  • 导入axios后，在相应位置绑定数据
    修改后的组件
<template>
	<div>
		<el-container style="height: 700px; border: 1px solid #eee">
			<el-header id="eHeader" style="font-size: 40px;
	background-color: rgb(238, 241, 246);">智能学习辅助系统</el-header>
			<el-container>
				<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
					<el-menu :default-openeds="['1', '3']">
						<el-submenu index="1">
							<template slot="title"><i class="el-icon-message"></i>导航一</template>
							<el-menu-item-group>
								<el-menu-item index="1-1">部门管理</el-menu-item>
								<el-menu-item index="1-2">员工管理</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-aside>
				<el-main>
					<el-form :inline="true" :model="searchForm" class="demo-form-inline">
						<el-form-item label="姓名">
							<el-input v-model="searchForm.name" placeholder="姓名" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="性别" id="gender">
							<el-select v-model="searchForm.gender" placeholder="性别" style="width: 150px;">
								<el-option label="男" value="1"></el-option>
								<el-option label="女" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<span>入职日期</span>
							<el-date-picker v-model="searchForm.entrydate" type="daterange" range-separator="至" start-placeholder="开始日期"
								end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">查询</el-button>
						</el-form-item>
					</el-form>
					<br>
					<el-table :data="tableData">
						<el-table-column prop="name" label="姓名" width="150"></el-table-column>
						<el-table-column label="图像" width="150">
							<template slot-scope="scope">
								<img :src="scope.row.image" style="width: 100px;height: 70px;">
							</template>
						</el-table-column>
						<el-table-column label="性别" width="120">
							<template slot-scope="scope">
								{{ scope.row.gender == 1 ? '男' : '女' }}
							</template>
						</el-table-column>
						<el-table-column prop="job" label="职位" width="120"></el-table-column>
						<el-table-column prop="entrydate" label="入职日期" width="150"></el-table-column>
						<el-table-column prop="updatetime" label="最后操作时间" width="180"></el-table-column>
						<el-table-column label="操作">
							<el-button type="primary" size="mini">编辑</el-button>
							<el-button type="danger" size="mini">删除</el-button>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<el-pagination background layout="sizes,total,prev, pager, next,jumper" :total="1000">
					</el-pagination>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script src="../../../js/axios-0.18.0"></script>
<script>
import axios from 'axios';

export default {
	data () {
		return {
			tableData: [],
			searchForm: {
				name: '',
				gender: '',
				job: '',
				entrydate: [],
				updatetime: ''
			}
		}
	},
	methods: {
		onSubmit () {
			console.log('submit!');
		}
	}, mounted () { 
		axios.get('https://yapi.pro/mock/73386/emp/list').then(res => {
			this.tableData = res.data.data;
		})
	}
}
</script>

<style>
</style>
FL不凡
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
JavaWeb阶段综合案例
qq_46002941的博客
02-22 2690
文章目录综合案例1，功能介绍2，环境准备2.1 工程准备2.2 创建表3，查询所有功能3.1 后端实现3.1.1 dao方法实现3.1.2 service方法实现3.1.3 servlet实现3.1.4 测试后端程序3.2 前端实现4，添加功能4.1 后端实现4.1.1 dao方法实现4.1.2 service方法实现4.1.3 servlet实现4.2 前端实现5，servlet优化5.1 问题导入5.2 代码优化5.2.1 后端优化5.2.2 前端优化6，批量删除6.1.
黑马《2023最新JavaWeb开发教程》发布啦~
技术专家
03-21 1703
黑马《2023最新JavaWeb开发教程》发布啦~
黑马程序员最新版JavaWeb综合案例(前后端完整版)
热门推荐
鲁棒最小二乘支持向量机
06-28 10万+
黑马程序员最新版JavaWeb综合案例(前后端完整版)
JavaWeb综合案例（黑马程序员2021年JavaWeb课程总结，所有功能均实现，包含数据库sql文件）
阿博的博客
09-25 9548
JavaWeb综合案例（黑马程序员2021年JavaWeb课程总结，所有功能均实现，包含数据库sql文件）
【黑马程序员】Javaweb综合案例
Yuan_ice的博客
03-09 2630
黑马程序员，综合案例
【JAVAWEB开发】黑马程序员java web案例资料（含Element的删除与修改）
程序猿追的博客
09-19 2万+
【JAVAWEB开发】基于Java+Servlet+Axios+Vue+Element+Maven+Mybatis —— 黑马程序员java web案例资料（含Element的删除与修改）
JavaWeb综合案例——品牌后台管理系统
08-12
最新版JavaWeb综合案例——品牌后台管理系统 来源：改编自黑马程序员最新JavaWeb课程案例 所用技术及工具：Mybatis+Maven+Filter+Ajax+JSON+JavaScript+HTML+CSS+Element+VUE
黑马javaweb
apple_52138126的博客
03-19 574
今日内容 1. Junit单元测试 2. 反射 3. 注解 Junit单元测试： * 测试分类： 1. 黑盒测试：不需要写代码，给输入值，看程序是否能够输出期望的值。 2. 白盒测试：需要写代码的。关注程序具体的执行流程。 * Junit使用：白盒测试 * 步骤： 1. 定义一个测试类(测试用例) * 建议： * 测试类名：被测试的类名Test CalculatorTest * 包名：xxx.xxx.xx.test cn.itcast.test 2. 定义测试方
2023黑马JavaWeb学习笔记及文档-3.JavaScript+Vue
最新发布
weixin_61450401的博客
01-09 819
通过代码/js效果演示提供资料进行效果演示，通过浏览器打开，我们点击主题5按钮，页面的主题发生了变化，所以js可以让我们的页面更加的智能，让页面和用户进行交互。第一种定义格式如下：function 函数名(参数1,参数2..){要执行的代码因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
黑马程序员java案例
09-12
黑马程序员的Java案例有很多，其中包括JavaWeb基础教程、JavaWeb综合案例和Java基础小节练习题答案等。 JavaWeb基础教程是黑马程序员最新版的教程，包含了从Java Web入门到企业实战的完整内容，其中包括了Java ...
java-前端页面模板
03-04
本模板未使用任何前端框架，简单易上手。简单修改后即可满足基本需求。登录、查询展示等功能页面都有。
一款不错的平台前端模板，可以省去前台构造。
09-13
一款不错的平台前端模板，可以省去前台构造。可以自定义菜单，还有相应的教程，适用于普通的平台搭建工程。
前端页面基本模板
11-01
web页面的 模板，后台系统搭建基本页面
java 网站模板
02-08
是一个企业级别的网站模板，主要用作公司的管理系统的一个完美的模板。
非常好的前端模板
08-08
非常好的前端开发模板，可以拿来直接使用
黑马JavaWeb综合案例
qq_59855352的博客
11-05 193
已实现黑马javaweb2021版所有功能
Java Web综合应用案例
qq_68026819的博客
06-19 231
掌握JSP+Servlet+DB方式实现用户登录功能。掌握JSP+Servlet方式实现用户登录功能。目录下创建lib目录，添加数据库驱动程序。掌握纯JSP方式实现用户登录功能。掌握MVC模式实现用户登录功能。5、创建登录失败页面。
黑马程序员java web案例资料（element包括删除和修改）
Javascript_tsj的博客
03-09 1万+
黑马最新的javaweb+mysql+maven+html+css+ajax+vue的案例资料（element的修改和删除也有) 百度网盘连接：https://pan.baidu.com/s/1wQG2yG3QJF5xjU931ZPtOA 提取码：lus9
黑马程序员最新版JavaWeb基础教程最后的案例学习记录
weixin_51577215的博客
04-03 5979
调式bug
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值