JavaWeb合集02-Vue基础内容
二、Vue基础内容
1、elementui-Dialog 对话框
通过 visible.sync 属性来控制弹窗显示和隐藏
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
2、elementui插槽
解决渲染数据时，得到的数据与要渲染的结果不一致的问题。
如：①数据库保存的性别用0和1表示，而要求渲染出来的结果是男和女。②数据库保存的是图片的链接，而渲染出来的要求是图片本身。
<template>
<el-table :data="tableData">
<!--能直接展示的数据的，直接使用 prop属性展示数据-->
<el-table-column prop="name" label="姓名">
</el-table-column>
<!--需要转换后才能展示的数据使用 template插槽来转换-->
<el-table-column label="性别">
<!--插槽转换-->
<template slot-scope="scope">
{{ scope.row.gender==1 ? "男":"女" }}
</template>
</el-table-column>
<!--需要转换后才能展示的数据使用 template插槽来转换-->
<el-table-column label="图片">
<!--插槽转换-->
<template slot-scope="scope">
<img :src="scope.row.img">
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: {
name:"小明",
gender: 1,
img: 'https://s11.ax1x.com/2022/11/20/zMyrdS.jpg'
}
}
}
}
</script>
3、vue路由
前端路由: URL中的hash(#号之后的)与组件之间的对应关系。
介绍： Vue Router是Vue的官方路由。下面是它的3个部分
①VueRouter: 路由器类，根据路由请求在路由视图中动态渲染选中的组件
②: 请求链接组件,浏览器会解析成超链接标签
③: 动态视图组件,用来渲染展示与路由路径对应的组件
路由表配置模板（router/index.js）
//路由设置
const routes = [
{
//路由访问路径：根路径，
path: '/',
//路由名字
name: 'Main',
//导入并注册路由，路径为组件的位置
component: () => import('../views/Main.vue'),
//页面重定向，我们在访问根路径时，会跳转到 "/home” 路径访问对应的页面，这里就是在内容显示区加载首页的页面
redirect:"/home",
//子组件：这里是，Main组件下包含有 Home、User 子组件
children:[
//首页的路由信息
{
path: '/home',
name: 'Home',
meta:{
//是否要验证"是"
requireAuto:false
},
component: () => import('../pages/home/Home.vue'),
},
//用户管理路由的信息
{
path: '/user',
name: 'User',
meta:{
//是否要验证"是"
requireAuto:false
},
component: () => import('../pages/user/UserList.vue'),
},
{
//权限管理
path:"/purview",
name:"Purview",
meta:{
requireAuto:false
},
component:()=>import('../pages/Purview.vue')
},
{
//资源管理
path:"/resource",
name:"Resource",
meta:{
requireAuto:false
},
component:()=>import('../pages/resource/Resource.vue')
},
{
//静态资源管理
path:"/static",
name:"StaticResource",
meta:{
requireAuto:false
},
component:()=>import('../pages/resource/StaticResource.vue')
},
{
//动态资源管理
path:"/trends",
name:"TrendsResource",
meta:{
requireAuto:false
},
component:()=>import('../pages/resource/TrendsResource.vue')
},{
//用户反馈
path:"/feedback",
name:"Feedback",
meta:{
requireAuto:false
},
component:()=>import('../pages/Feedback.vue')
},{
//版本通知
path:"/notice",
name:"Notice",
meta:{
requireAuto:false
},
component:()=>import('../pages/Notice.vue')
}
]
},
//和Main组件同级的登陆组件
{
path:"/login",
name:"Login",
component:()=>import('../views/login/Login.vue')
}
]
const router = new VueRouter({
routes
})
//这里设置路由拦截,验证session是否失效
router.beforeEach((to, from, next) => {
if (to.meta.requireAuto) { //判断是否需要登录验证
var uname= sessionStorage.getItem("uNum"); //这里是登录页面缓存的token
if (uname == "0830") { //判断token等于时候就跳转路由
next();//这个跳转是上面路由跳转
}
else { //token不一样时候就返回登录页面
next({
path: '/login',//返回登录界面
// query: {redirect: to.fullPath}
})
}
}
else {
//如果不需要登录权限就直接跳转到该路由
next();
}
})
通过在侧边栏中添加标签来跳转到对应的组件中去
<!--跳转到用户管理组件-->
<router-link to="/user">用户管理</router-link>
在要动态渲染页面的地方添加标签即可
<router-view> </router-view>
4、打包部署
4.1 vue项目打包
vue项目通过nginx服务器来部署，可通过命令：npm run build 来打包项目，打包好的项目会放到dist目录下
4.1 nginx 介绍
Nginx是一 款轻 量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3) 代理服务器。其特点是占有内存少,并发能力强，在各大型互联网公司都有非常广泛的使用。
Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。
windos查看某个端口被哪些进程占用命令：netstat -ano | findStr 80
下载好的nginx压缩包里面的重要目录介绍：
- conf：配置文件目录
- html：静态资源文件目录
- logs：日志文件目录
- temp：临时文件目录
- nginx.exe：启动程序文件
部署步骤：
- 下载好nginx压缩包，并解压到无中文的目录下。
- 将vue打包好的全部文件拷贝到html目录下。
- 去nginx配置文件 ngin.conf中的第36行，将默认的80端口改为其它端口号（防止与其它进程端口冲突）
- 双击nginx.exe启动文件，可以去进程看一下是否启动成功。
- 去浏览器中输入localhost:端口号，访问试试。