search

博客列表 >vue代码练习

vue代码练习

Blackeye
Blackeye原创
2022年06月27日 14:19:11439浏览


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. }
上一条：Linux 如何从网上下载文件下一条：6.30日开始学习PHP，圆我多年的学习梦想！ヾ(◍°∇°◍)ﾉﾞ
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多