注册公司网站需要多少钱,wordpress使用cdn图片不显示,小程序怎么移除,商务网站的主要内容1.前端 如何用ElementUI快速搭建一个前端网页模板#xff0c;接下来会详细讲解#xff01; 1.Container布局 这是ElementUI官网提供的能快速搭建一个网页的基本布局模式#xff0c;以下是一个网页的基本架构模式#xff0c;主要分为三大块#xff1a; AsideHeaderMain 我…1.前端 如何用ElementUI快速搭建一个前端网页模板接下来会详细讲解 1.Container布局 这是ElementUI官网提供的能快速搭建一个网页的基本布局模式以下是一个网页的基本架构模式主要分为三大块 AsideHeaderMain 我们可以采用Container布局先来给网页定一个基本架构 templatebodydivel-container el-aside 侧边栏 /el-asideel-containerel-header头部/el-headerel-main主体/el-main/el-container/el-container/div/body/template
2.定义aside 给aside模块一点样式 width:宽度 min-height: 100vh 设置最小高度这里的100vm是整个窗口的高度相当于是把窗口分成了100份我选择100vm就相当于选择了全部 el-aside stylewidth: 200px;min-height: 100vh;background-color: #001529;
/el-aside 效果展示 注意由于网页的body里的margin默认是8px所以我们设计的侧边栏总是和窗口边框差一点距离这样影响美观所以在style中把margin设置成0px如下 stylebody{margin: 0px !important;}
/style
3.定义logo logo是归于Aside内部的所以要在aside标签内部定义如下 templatebodydivel-container el-aside 侧边栏divlogo/div /el-asideel-containerel-header头部/el-headerel-main主体/el-main/el-container/el-container/div/body/template 接下来我们给logo添加一点样式如下 height:设置div高度 display:flex;align-items: center;justify-content: center; 这三个是一起的后面两个是设置文字位置竖直居中和水平居中要想这样设置就必须先通过第一个diplay属性变成flex布局 color:设置文字颜色 div styleheight: 60px;line-height: 60px;display: flex;align-items: center;justify-content: center;color:white;spanlogo /span/div 4.定义导航栏 导航栏样式有几个属性需要注意 router:绑定路由和下面的index属性配合使用index属性后面填写具体路由点击之后就能页面跳转 text-color:文字颜色 active-text-color:鼠标悬停之后的文字颜色 !--侧边导航栏--!--route属性表示绑定了路由--el-menu default-active1background-color#001529text-colorrgba(255,255,255,0.85)active-text-color#fffstyleborder:noneel-menu-item index1i classel-icon-house/ispan系统首页/span/el-menu-itemel-menu-item index2i classel-icon-s-tools/ispan信息管理/span/el-menu-itemel-menu-itemi classel-icon-user-solid/ispan用户管理/span/el-menu-itemel-submenutemplate slottitlei classel-icon-star-on/ispan财务报表/span/templateel-menu-item-groupel-menu-itemspan员工财务/span/el-menu-itemel-menu-itemspan员工财务/span/el-menu-item/el-menu-item-group/el-submenu/el-menu 以上还包括了二级导航栏下面来制作鼠标悬停之后的样式选中某个栏目之后的样式需要在style中使用class选择器来完善 .el-menu-item:hover 鼠标悬停之后 .el-menu-item.is-active 被激活之后 .el-menu-item:hover {background-color: #40a9ff !important;}.el-menu-item.is-active{background-color: #40a9ff !important;}效果展示 5.定义header 头部主要加了两个功能。一个是面包屑一个是垂直下拉 !--Header--el-headeri classel-icon-menu/iel-breadcrumb separator-classel-icon-arrow-right stylemargin-left:20px;el-breadcrumb-item replace :to{ path:/HomeView }系统首页/el-breadcrumb-itemel-breadcrumb-item replace :to{ path: / }活动管理/el-breadcrumb-item/el-breadcrumbdiv styleflex:1;display: flex;align-items: center;justify-content: flex-endel-dropdowndivel-avatar iconel-icon-user-solid/el-avatar/divel-dropdown-menu slotdropdown el-dropdown-item个人信息/el-dropdown-itemel-dropdown-item修改密码/el-dropdown-itemel-dropdown-item退出登录/el-dropdown-item/el-dropdown-menu/el-dropdown/div/el-header
6.定义main main的部分加了两个div主要是table表的展示 el-maindiv classbox1 stylewidth: 1280px;height: 50px;border-radius: 5px;margin-left:5px;display: flex;align-items: center span stylemargin-left: 20px;color:grey愿您每天都充满美好/span/divdiv classbox2 stylewidth: 1280px;height: 400px;border-radius: 5px;margin-left:5px;margin-top:5px el-table :datausersel-table-column labelID propid/el-table-columnel-table-column label姓名 propname/el-table-columnel-table-column label住址 propaddress/el-table-columnel-table-column label症状 propsymptom/el-table-column/el-table/div/el-main
css样式
.box1{box-shadow: 2px 0 6px rgba(0,21,41,.35);margin-right: 10px;
}.box2{box-shadow: 2px 0 6px rgba(0,21,41,.35);} PSlogo区域之前主要是为了和侧边栏的其他部分做一个区分才随便弄了一个样式由于太丑了所以换了_ i classel-icon-platform-eleme stylefont-size: 24pxHello World/i
效果展示 2.实现前后端表单数据展示
2.1.前端程序 首先前端要给后台发送请求一般要用到axios插件所以要先下载axios插件并且导入 import axios from axios; 然后在form表单上绑定数据采用data属性来给table表传输数据我们需要从后台动态的给users参数来传输数据 Element UI官方解释: 然后我们要在Vue对象的数据区中创建一个users这个users是一个数组类型 接下来就是给后台发送请求并且接收后台传输的数据并且封装给users即可 请求我们放在mount钩子函数中当页面加载完之后就向后台发送请求如下 采用的请求方式是getres中就封装的是后台发送给前端的数据res.data.data表示res中专门用来存储数据的data中的data对象第二个data对象中就装的是后台传递的数据然后把他交给前端的users 2.2.后端程序 这里就不展现连接数据库mapper层service层的代码了就直接展示controller层 在编写controller层之前我们需要先编写一个通用的返回类专门用来封装后台返回给前端的数据如下 Data
AllArgsConstructor
NoArgsConstructor
public class Result {public static final String CODE_SUCCESS 200;public static final String CODE_AUTH_ERROR 401;public static final String CODE_SYS_ERROR 500;private String code;private String msg;private Object data;public static Result success(){return new Result(CODE_SUCCESS,请求成功,null);}public static Result success(Object data){return new Result(CODE_SUCCESS,请求成功,data);}public static Result error(String msg){return new Result(CODE_SYS_ERROR,msg,null);}public static Result error(String code,String msg){return new Result(code,msg,null);}public static Result error(){return new Result(CODE_SYS_ERROR,请求失败,null);}
}
controller层程序 这里要介绍下由于前端的端口是8081后端的端口是8081为了解决跨域问题所以加上了CrossOrigin注解 CrossOrigin
RestController
RequestMapping(/user)
public class UserController {Autowiredprivate UserMapper userMapper;GetMapping(/select)public Result selectAllUser(){ListUser users userMapper.selectAllUser();for (User user : users) {System.out.println(user);}return Result.success(users);}
}
