简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > vue代码练习
Blogger Information
Blog 38
fans 0
comment 0
visits 18520
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vue代码练习
Blackeye
Original
416 people have browsed it


0525\antd\src\App.vue

  1. <template>
  2.     <a-layout style="min-height: 100vh" id="oyk">
  3.         <a-layout-sider v-model:collapsed="collapsed" collapsible>
  4.             <div class="logo" />
  5.             <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
  6.                 <router-link to="/">
  7.                     <a-menu-item key="-1">
  8.                         <DesktopOutlined />
  9.                         <span>首页</span>
  10.                     </a-menu-item>
  11.                 </router-link>
  12.                 <router-link to="/info">
  13.                     <a-menu-item key="-2">
  14.                         <UserOutlined />
  15.                         <span>个人中心</span>
  16.                     </a-menu-item>
  17.                 </router-link>
  18.                 <a-sub-menu v-for="(item,index,key) in data.menu" :key="item.mid">
  19.                     <template #title v-if="item.type == 0">
  20.                         <span>
  21.                             <HeartOutlined />
  22.                             <span>{{item.label}}</span>
  23.                         </span>
  24.                     </template>
  26.                     <template #title v-if="item.type == 1">
  27.                         <router-link :key="item.mid" :to="item.src">
  28.                                 <MenuOutlined />
  29.                                 <span>{{item.label}}</span>
  30.                         </router-link>
  31.                     </template>
  33.                     <template #title v-if="item.type == 2">
  34.                         <a :href="item.src">
  35.                                 <MenuOutlined />
  36.                                 <span>{{item.label}}</span>
  37.                         </a>
  38.                     </template>
  41.                     <template v-if="item.son" v-for="(items,indexs,keys) in item.son" >
  42.                         <router-link :key="items.mid" :to="items.src" v-if="items.type==1">
  43.                             <a-menu-item :key="items.mid">
  44.                                 <MenuOutlined />
  45.                                 <span>{{items.label}}</span>
  46.                             </a-menu-item>
  47.                         </router-link>
  48.                         <a :key="items.mid" :href="items.src" v-if="items.type==2">
  49.                             <a-menu-item :key="items.mid">
  50.                                 <MenuOutlined />
  51.                                 <span>{{items.label}}</span>
  52.                             </a-menu-item>
  53.                         </a>
  54.                     </template>
  55.                 </a-sub-menu>
  56.                 <!-- <a-sub-menu key="3">
  57.                     <template #title>
  58.                         <span>
  59.                             <SettingOutlined />
  60.                             <span>系统配置</span>
  61.                         </span>
  62.                     </template>
  63.                     <a-menu-item key="4">
  64.                         <TeamOutlined />
  65.                         <span>部门管理</span>
  66.                     </a-menu-item>
  67.                     <router-link to="/user_lists">
  68.                         <a-menu-item key="5">
  69.                             <UserOutlined />
  70.                             <span>管理员管理</span>
  71.                         </a-menu-item>
  72.                     </router-link>
  73.                 </a-sub-menu>
  74.                 <a-sub-menu key="4">
  75.                     <template #title>
  76.                         <span>
  77.                             <SettingOutlined />
  78.                             <span>商城项目</span>
  79.                         </span>
  80.                     </template>
  81.                     <router-link to="/shop_lists">
  82.                         <a-menu-item key="10">
  83.                             <UserOutlined />
  84.                             <span>商品列表</span>
  85.                         </a-menu-item>
  86.                     </router-link>
  87.                     <a-menu-item key="11">
  88.                         <UserOutlined />
  89.                         <span>商品分类列表</span>
  90.                     </a-menu-item>
  91.                     <a-menu-item key="12">
  92.                         <UserOutlined />
  93.                         <span>订单列表</span>
  94.                     </a-menu-item>
  95.                     <a-menu-item key="13">
  96.                         <UserOutlined />
  97.                         <span>用户列表</span>
  98.                     </a-menu-item>
  99.                     <a-menu-item key="14">
  100.                         <UserOutlined />
  101.                         <span>用户地址列表</span>
  102.                     </a-menu-item>
  103.                     <a-menu-item key="15">
  104.                         <UserOutlined />
  105.                         <span>广告列表</span>
  106.                     </a-menu-item>
  107.                 </a-sub-menu> -->
  108.             </a-menu>
  109.         </a-layout-sider>
  110.         <a-layout>
  111.             <a-layout-content style="margin: 0 16px">
  112.                 <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
  113.                     <router-view></router-view>
  114.                 </div>
  115.             </a-layout-content>
  116.         </a-layout>
  117.     </a-layout>
  118. </template>
  121. <script>
  122. import { reactive, toRef } from '@vue/reactivity';
  123. import {AdminIndexLists} from './network/index.js';
  124. import { message, Modal  } from "ant-design-vue";
  125.     import {
  126.         DesktopOutlined,
  127.         UserOutlined,
  128.         HeartOutlined,
  129.         MenuOutlined,
  130.         SettingOutlined,
  131.         TeamOutlined,
  132.         ApiOutlined
  133.     } from "@ant-design/icons-vue";
  134.     import { defineComponent, ref } from "vue";
  135.     export default defineComponent({
  136.         components: {
  137.             DesktopOutlined,
  138.             UserOutlined,
  139.             HeartOutlined,
  140.             MenuOutlined,
  141.             SettingOutlined,
  142.             TeamOutlined,
  143.             ApiOutlined
  144.         },
  145.         data() {
  146.             return {
  147.                 collapsed: ref(false),
  148.                 selectedKeys: ref(["-1"]),
  149.             };
  150.         },
  151.         setup(){
  152.             const data = reactive({
  153.                 menu:[],
  154.             })
  155.             AdminIndexLists().then( (res)=>{
  156.                 data.menu = res.data.menu;
  157.             } )
  158.             return{
  159.                 data
  160.             }
  161.         }
  162.     });
  163. </script>

0525\antd\src\views\GroupLists.vue

  1. <template>
  2.     <a-button type="default" @click="add(2)">修改</a-button>
  4.         <a-modal
  5.         v-model:visible="data.addModal"
  6.         width="100%"
  7.         centered
  8.         :title="data.title"
  9.         :mask="mask"
  10.         wrapClassName="full-modal"
  11.         okText="确定"
  12.         okType="primary"
  13.         cancelText="取消"
  14.         @ok="add_ok()"
  15.     >
  16.         <a-form name="form" :model="formData" @submit="submit">
  17.             <a-form-item name="group_name" label="部门名">
  18.                 <a-input v-model:value="formData.group_name" />
  19.             </a-form-item>
  21.             <a-form-item name="name" label="权限">
  22.                 <a-checkbox-group name="rights" v-model:value="formData.rights">
  23.                     <div v-for="(item,index,key) in data.menu" :key="item.id">
  24.                         <a-checkbox :value="item.mid">{{item.label}}</a-checkbox>
  25.                         <hr style="border:dotted #0066CC;"/>
  26.                         <div>
  27.                             <a-checkbox v-for="(items,indexs,keys) in item.son" :key="items.mid" :value="items.mid">{{items.label}}</a-checkbox>
  28.                             <hr/>
  29.                         </div>
  30.                     </div>
  31.                 </a-checkbox-group>
  32.             </a-form-item>
  34.         </a-form>
  35.     </a-modal>
  38.     <a-table :dataSource="data.dataSource" :columns="data.columns" :rowSelection="rowSelection">
  39.         <template #bodyCell="{ text, record, index, column }">
  40.             <template v-if="column.dataIndex=='sex'">
  41.                 <span v-if="record.sex == 1">男</span>
  42.                 <span v-if="record.sex == 2">女</span>
  43.             </template>
  44.             <template v-if="column.dataIndex=='status'">
  45.                 <span v-if="record.status == 1" style="color:green;">开启</span>
  46.                 <span v-if="record.status == 0" style="color:red;">关闭</span>
  47.                 <a-button type="default" @click="edit( record.group_id  )">修改</a-button>
  48.             </template>
  49.         </template>
  50.     </a-table>
  51. </template>
  52. <script>
  53. import { reactive, toRef } from '@vue/reactivity';
  54. import { AdminGroupLists,AdminMenuAdd,AdminMenuLists } from '../network/index.js';
  55. import { message,Modal  } from "ant-design-vue";
  56. export default {
  57.     setup() {
  58.         const rowSelection = {
  59.             type : "radio" ,
  60.             onChange(selectedRowKeys, selectedRows) {
  61.                 console.log(selectedRowKeys,selectedRows);
  62.                 data.select_id = selectedRowKeys[0];
  63.                 data.select_data = selectedRows[0];
  64.             }
  65.         };
  67.         const data = reactive({
  68.             select_id : 0,
  69.             // columns 表单头
  70.             columns: [
  71.                 {
  72.                     title: "ID",    // 是显示在表单头上的名字
  73.                     dataIndex: "group_id",   // 对应接口返回的字段名，就是key
  74.                 },
  75.                 {
  76.                     title: "部门名",
  77.                     dataIndex: "group_name"
  78.                 },
  79.                 {
  80.                     title: "状态",
  81.                     dataIndex: "status"
  82.                 }
  83.             ],
  84.             dataSource: [],
  85.             menu: [],
  86.             addModal : false,
  87.             b_status : 1,
  88.             title : "修改",
  89.             select_data : []
  91.         })
  92.         const formData = reactive({
  93.             group_name : '',
  94.             rights : '',
  95.         });
  96.         const add = (e)=>{
  97.             if(e == 2){
  98.                 if(data.select_id == 0){
  99.                     message.warning('请您选择一条数据');
  100.                     return false;
  101.                 }
  102.                 data.title = "修改";
  103.                 formData.group_name = data.select_data.group_name;
  104.                 formData.rights = data.select_data.rights;
  105.             }else{
  106.                 data.title = "添加";
  107.             }
  108.             data.b_status = e;
  109.             data.addModal = true;
  110.         }
  112.         // 模态框确认按钮
  113.         const add_ok = ()=>{
  114.             // 可以在这里判断form表单的数据，不能为空。
  115.             // 减少服务器压力，必然的。
  116.             // 但是后端接口，也要判断。
  117.             // 前端比较多，如果不是你写的前端呢？安卓和ios，它们在传值的时候没有判断
  118.             // 那么后端接口就会吃大亏。
  120.             if(data.select_id == 0){
  121.                 formData.group_id = 0;
  122.             }else{
  123.                 formData.group_id = data.select_data.group_id;
  124.             }
  126.             AdminMenuAdd(formData).then( (res)=>{
  127.                 console.log(res);
  128.                 if(res.code == 0){
  129.                     message.success(res.msg);
  131.                     data.addModal = false;
  133.                     AdminGroupLists().then( (res)=>{
  134.                         data.dataSource = res.data.group;
  135.                         data.menu = res.data.menu;
  136.                     } )
  137.                 }else{
  138.                     message.warning(res.msg);
  139.                 }
  140.             } )
  141.         }
  142.         AdminGroupLists().then( (res)=>{
  143.             data.dataSource = res.data.group;
  144.             data.menu = res.data.menu;
  145.         } )
  146.         return {
  147.             data,
  148.             rowSelection,
  149.             add,
  150.             formData,
  151.             add_ok,
  152.         };
  153.     }
  154. };
  155. </script>

0525\antd\src\network\index.js

  1. import {request} from "./request.js";
  2. export function AdminUserLists(data={}){
  3.     return request( {
  4.         method : "POST",
  5.         url : "Index/admin_user_lists",
  6.         data
  7.     } )
  8. }
  9. export function AdminUserAdd(data={}){
  10.     return request( {
  11.         method : "POST",
  12.         url : "Index/admin_user_add",
  13.         data
  14.     } )
  15. }
  18. export function AdminUserDel(data={}){
  19.     return request( {
  20.         method : "POST",
  21.         url : "Index/admin_user_del",
  22.         data
  23.     } )
  24. }
  26. export function AdminMenuLists(data={}){
  27.     return request( {
  28.         method : "POST",
  29.         url : "Index/admin_menu_lists",
  30.         data
  31.     } )
  32. }
  34. export function AdminIndexLists(data={}){
  35.     return request( {
  36.         method : "POST",
  37.         url : "Index/admin_index_lists",
  38.         data
  39.     } )
  40. }
  42. export function AdminGroupLists(data={}){
  43.     return request( {
  44.         method : "POST",
  45.         url : "Index/admin_group_lists",
  46.         data
  47.     } )
  48. }
  50. export function AdminMenuAdd(data={}){
  51.     return request( {
  52.         method : "POST",
  53.         url : "Index/admin_menu_add",
  54.         data
  55.     } )
  56. }

0525\antd\src\router\index.js

  1. import { createRouter, createWebHashHistory } from "vue-router";
  2. import Index from "../views/Index.vue";
  3. import UserLists from "../views/UserLists.vue";
  4. import MenuLists from "../views/MenuLists.vue";
  5. import GroupLists from "../views/GroupLists.vue";
  7. const routes = [
  8.   {
  9.     path: "/",
  10.     alias: "/index",
  11.     name: "Index",
  12.     component: Index,
  13.     meta: {
  14.       title: "首页",
  15.     }
  16.   },
  17.   {
  18.     path: "/user_lists",
  19.     name: "UserLists",
  20.     component: UserLists,
  21.     meta: {
  22.       title: "用户列表"
  23.     }
  24.   },
  25.   {
  26.     path: "/menu_lists",
  27.     name: "MenuLists",
  28.     component: MenuLists,
  29.     meta: {
  30.       title: "菜单列表"
  31.     }
  32.   },
  33.   {
  34.     path: "/group_lists",
  35.     name: "GroupLists",
  36.     component: GroupLists,
  37.     meta: {
  38.       title: "权限列表"
  39.     }
  40.   }
  41. ];
  43. const router = createRouter({
  44.   history: createWebHashHistory(process.env.BASE_URL),
  45.   routes,
  46. });
  48. router.beforeEach((to) => {
  49.   document.title = to.meta.title;
  50. });
  52. export default router;

0525\tp\app\admin\controller\Index.php

  1. <?php
  2. namespace app\admin\controller;
  3. use think\facade\Db;
  4. use think\facade\Request;
  6. class Index
  7. {
  8.     public function __construct(){
  9.         // 使用php的header函数，设置为*，全部能访问
  10.         header("Access-Control-Allow-Origin:*");
  11.     }
  13.     public function admin_index_lists(){
  14.         $user = Db::table('bew_admin_user')->where('uid',1)->find();
  16.         $group = Db::table('bew_admin_user_group')->where('group_id',$user['group_id'])->find();
  18.         $rights = json_decode($group['rights'],true);
  20.         $menu = Db::table('bew_admin_sys_menu')->where('mid','in',$rights)->where('status',1)->order('sort DESC')->select()->toArray();
  21.         $tmp = [];
  22.         foreach($menu as $k=>&$v){
  23.             if($v['parent_id'] == 0 ){
  24.                 $v['key'] = $k;
  25.                 $tmp[$v['mid']] = $v;
  26.             }else{
  27.                 $v['key'] = $k;
  28.                 $tmp[$v['parent_id']]['son'][] = $v;
  29.             }
  30.         }
  32.         echo json_encode([
  33.             'code' => 0,
  34.             'msg' => '成功',
  35.             'data' => [
  36.                 'menu' => $tmp
  37.             ]
  38.         ]);
  40.     }
  42.     public function admin_user_lists()
  43.     {
  44.         $user = Db::table('bew_admin_user')->select()->toArray();
  46.         foreach($user as &$v){
  47.             $v['key'] = $v['uid'];  // 前端用到的字段，key，可以让多选框，选中一条数据。必要的，只要是唯一的就可以用
  48.             $v['time_last_s'] = date('Y-m-d H:i:s',$v['time_last']);
  49.         }
  51.         echo json_encode([
  52.             'code' => 0,
  53.             'msg' => '成功',
  54.             'data' => $user
  55.         ]);
  56.     }
  57.     public function admin_user_add(){
  58.         $account = input('post.account');
  59.         if(empty($account)){
  60.             echo json_encode([
  61.                 'code' => 1,
  62.                 'msg' => '请输入账号'
  63.             ]);
  64.             exit;
  65.         }
  66.         $password = input('post.password');
  67.         $name = input('post.name');
  68.         $phone = input('post.phone');
  69.         $qq = input('post.qq');
  70.         $sex = input('post.sex',1);
  72.         $data = [
  73.             'account' => $account,
  74.             'password' => md5($password),
  75.             'name' => $name,
  76.             'phone' => $phone,
  77.             'qq' => $qq,
  78.             'sex' => $sex,
  79.         ];
  81.         $uid = input('post.uid',0);
  83.         if($uid == 0){
  84.             $data['time_add'] = time();
  85.             if(empty($password)){
  86.                 echo json_encode([
  87.                     'code' => 1,
  88.                     'msg' => '请输入密码'
  89.                 ]);
  90.                 exit;
  91.             }
  92.             $data['password'] = md5($password);
  93.             $insert = Db::table('bew_admin_user')->insert($data);
  94.             if(empty($insert)){
  95.                 echo json_encode([
  96.                     'code' => 1,
  97.                     'msg' => '添加失败'
  98.                 ]);
  99.                 exit;
  100.             }
  101.             echo json_encode([
  102.                 'code' => 0,
  103.                 'msg' => '添加成功'
  104.             ]);
  105.         }else{
  106.             if(!empty($password)){
  107.                 $data['password'] = md5($password);
  108.             }
  109.             $update = Db::table('bew_admin_user')->where('uid',$uid)->update($data);
  110.             if(empty($update)){
  111.                 echo json_encode([
  112.                     'code' => 1,
  113.                     'msg' => '修改失败'
  114.                 ]);
  115.                 exit;
  116.             }
  117.             echo json_encode([
  118.                 'code' => 0,
  119.                 'msg' => '修改成功'
  120.             ]);
  121.         }
  124.     }
  125.     public function admin_user_del(){
  126.         $uid = input('post.uid');
  127.         $delete = Db::table('bew_admin_user')->where('uid',$uid)->delete();
  128.         if(empty($delete)){
  129.             echo json_encode([
  130.                 'code' => 1,
  131.                 'msg' => '删除失败'
  132.             ]);
  133.         }
  134.         echo json_encode([
  135.             'code' => 0,
  136.             'msg' => '删除成功'
  137.         ]);
  138.     }
  139.     public function admin_menu_lists(){
  140.         $lists = Db::table('bew_admin_sys_menu')->order('sort DESC')->select()->toArray();
  142.         $tmp = [];
  143.         foreach($lists as $k=>&$v){
  144.             if($v['parent_id'] == 0 ){
  145.                 $v['key'] = $k;
  146.                 $tmp[$v['mid']] = $v;
  147.             }else{
  148.                 $v['key'] = $k;
  149.                 $tmp[$v['parent_id']]['son'][] = $v;
  150.             }
  151.         }
  153.         echo json_encode([
  154.             'code' => 0,
  155.             'msg' => '成功',
  156.             'data' => array_merge($tmp)
  157.         ]);
  158.     }
  160.     public function admin_group_lists(){
  161.         $group = Db::table('bew_admin_user_group')->select()->toArray();
  162.         foreach($group as &$v){
  163.             $v['key'] = $v['group_id'];
  164.         }
  166.         $lists = Db::table('bew_admin_sys_menu')->order('sort DESC')->select()->toArray();
  167.         $tmp = [];
  168.         foreach($lists as $k=>&$v){
  169.             if($v['parent_id'] == 0 ){
  170.                 $v['key'] = $k;
  171.                 $tmp[$v['mid']] = $v;
  172.             }else{
  173.                 $v['key'] = $k;
  174.                 $tmp[$v['parent_id']]['son'][] = $v;
  175.             }
  176.         }
  177.         echo json_encode([
  178.             'code' => 0,
  179.             'msg' => '成功',
  180.             'data' => [
  181.                 'group' => $group,
  182.                 'menu' => $tmp
  183.             ]
  184.         ]);
  185.     }
  186.     public function admin_menu_add(){
  187.         $group_id = input('post.group_id');
  188.         $rights = input('post.rights');
  189.         $group_name = input('post.group_name');
  190.         $update = Db::table('bew_admin_user_group')->where('group_id',$group_id)->update([
  191.             'group_name' => $group_name,
  192.             'rights' => json_encode($rights)
  193.         ]);
  194.         if(empty($update)){
  195.             echo json_encode([
  196.                 'code'=>1,
  197.                 'msg'=>'修改失败'
  198.             ]);
  199.             exit;
  200.         }
  201.         echo json_encode([
  202.             'code'=>0,
  203.             'msg'=>'成功'
  204.         ]);
  205.     }
  206. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！