项目页面基本构造

平平无奇小码手

已于 2023-04-10 15:08:44 修改

阅读量107

点赞数

分类专栏： XXXX系统（自用）文章标签： javascript 前端 ajax

于 2023-04-10 14:33:40 首次发布

本文链接：https://blog.csdn.net/qq_51173747/article/details/130058983

版权

XXXX系统（自用）专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html需引入axios、vue.js

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.3/axios.js"></script>

vue.js下载路径：

https://download.csdn.net/download/qq_51173747/87621119https://download.csdn.net/download/qq_51173747/87621119

api（以员工列表为例）

function getEmployeeList(params){
    return $axios({
        url:'/employees/page',
        method:'get',
        params
    })
}

// 修改---启用禁用接口
function enableOrDisableEmployee (params) {
    return $axios({
      url: '/employees',
      method: 'put',
      data: { ...params }
    })
  }
  
  // 新增---添加员工
  function addEmployee (params) {
    return $axios({
      url: '/employees',
      method: 'post',
      data: { ...params }
    })
  }
  
  // 修改---编辑员工
  function editEmployee (params) {
    return $axios({
      url: '/employees',
      method: 'put',
      data: { ...params }
    })
  }

  //删除---删除员工
  function deleteEmployee (id){
    return $axios({
        url:'/employees',
        method:'delete',
        params:{id}
    })
  }

  //获取职位列表
  function getJobList (params) {
    return $axios({
      url:'/jobs/list',
      method:'get',
      params
    })
  }

  //获取门店列表
  function getStoreList(params){
    return $axios({
      url:'/stores/list',
      method:'get',
      params
    })
  }

  // 查询详情
function queryEmployeeById (id) {
  return $axios({
    url: `/employees/${id}`,
    method: 'get'
  })
}

//获取偏好
function getFlavorById(id){
  return $axios({
    url:`/employees/flavors/${id}`,
    method:'get'
  })
}

function loginApi(data) {
  return $axios({
    'url': '/employees/login',
    'method': 'post',
    data
  })
}
function logoutApi(){
  return $axios({
    'url': '/employees/logout',
    'method': 'post',
  })
}
function editPwd(params){
  return $axios({
    url:'/employees',
    method:'put',
    data:{...params}
  })
}

html页面照常写

<script>代码结构

<script type="text/javascript">
	new Vue({
        el:'#login',
        data(){
            return{
            }
        },
        computed:{},
        created(){},
        mounted(){},
        methods:{},
})
</script>

模拟考试代码

在input.html里输入产品名称（只能为中文），点击录入，跳转到product.html页面，获取产品信息。

【input.html】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品录入</title>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
    <style>
        html,
		body,
		input {
			margin: 0;
			padding: 0;
		}
        #search div:first-child{
            float:left;
            width: 100px;
            text-align: right;
            margin-right:10px;
        }
        #submit input{
            margin-top:10px;
            width:265px;
        }
        #error{
            color:#ff0000;
        }
    </style>
</head>
<body>
    <div id="info">
        <div id="search">
            <div>产品名称</div>
            <div><input type="text" placeholder="请输入产品名称" v-model="name"></div>
        </div>
        <div id="error">{{errormsg}}</div>
        <div id="submit"><input type="button" value="录入" @click="validateData"></div>
    </div>
</body>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#info',
        data(){
            return {
                name:'',
                errormsg:'',
            }
        },
        methods:{
            validateData(){
                if(this.name==''){
                    this.errormsg='请输入产品名称'
                }else if(/\d/.test(this.name)){
                    this.errormsg='产品名称中不能包含数字'
                }else{
                    window.location.href='product.html'
                }
            }
        }
    })
		</script>
</script>
</html>

【product.html】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.3/axios.js"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->

<style>
    table{
        border:1px solid #000;
        border-collapse: collapse;
        width: 550px;
    }
    th{
        height: 30px;
        text-align: center;
        vertical-align: middle;
        border:1px solid #000;
    }
    td{
        height: 100px;
        text-align: center;
        vertical-align: middle;
        border:1px solid #000;
    }
    img{
        height: 100px;
        width: 100px;
    }
    a{
        color:#00ff00;
    }
    a:hover{
        color:#ff0000;
    }
    tr th:nth-child(4){
        background-color: #ffffd0;
    }
    tr td:nth-child(4){
        background-color: #ffffd0;
    }
    tr th:nth-child(1){
        width: 100px;
    }
    tr th:nth-child(2){
        width: 150px;
    }
    tr th:nth-child(3){
        width: 150px;
    }
    
</style>
<body>
    <div id="info">
        <div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
        <div id="product">
            <table>
                <tr>
                    <th></th>
                    <th>品牌</th>
                    <th>型号</th>
                    <th>价格</th>
                </tr>
                <tr v-for="item in list">
                    <td><img :src="'http://114.67.241.121:8080/img/'+item.image">
                    </td>
                    <td>{{item.brand}}</td>
                    <td><a href="'http://114.67.241.121:8080/img/'+item.image">{{item.model}}</a></td>
                    <td>{{item.price}}</td>
                </tr>
            </table>
            
        </div>
    </div>
</body>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#info',
        data(){
            return {
                list:[],
            }
        },
        created(){
            axios({
                method:'get',
                url:'http://114.67.241.121:8080/product/list'
            }).then(res=>{
                this.list=res.data.data
            })
        }
    })
</script>
</html>