JavaWeb合集02-Vue基础内容

二、Vue基础内容

1、elementui-Dialog 对话框

通过 visible.sync 属性来控制弹窗显示和隐藏

html 复制代码

<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表示，而要求渲染出来的结果是男和女。②数据库保存的是图片的链接，而渲染出来的要求是图片本身。

html 复制代码

<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）

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();
  }
})

通过在侧边栏中添加标签来跳转到对应的组件中去

html 复制代码

<!--跳转到用户管理组件-->
<router-link to="/user">用户管理</router-link>

在要动态渲染页面的地方添加标签即可

html 复制代码

<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:端口号，访问试试。