ABP实践(4)-abp前端vue框架之简单商品增删改查(帮助刚入门的新手快速了解怎么才能加入自己的功能并运行起来)...

最新推荐文章于 2023-07-19 12:22:51 发布
最新推荐文章于 2023-07-19 12:22:51 发布
阅读量1.3k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyb926/article/details/105132997
版权

提示:如有不明白的地方请先查看前3篇ABP实践系列的文章

1,下载及启动abp项目前后端分离(netcore+vue)

2,修改abp数据库为mysql

3,商品系列api接口(本文主要依赖在这个商品列表接口)

以下正文开始:

1.打开vue项目(这里是用vscode工具)在views文件夹下创建goods文件夹然后创建商品列表goods.vue文件,商品创建create-goods.vue,编辑商品edit-goods.vue

 

 goods.vue文件里的代码如下:

<template>
    <div>
        <Card dis-hover>
            <div class="page-body">
                <Form ref="queryForm" :label-width="100" label-position="left" inline>
                    <Row :gutter="16">
                        <Col span="8">
                            <FormItem :label="L('Keyword')+':'" style="width:100%">
                                <Input v-model="pagerequest.keyword" :placeholder="L('GoodsName')"></Input>
                            </FormItem>
                        </Col>                 
                        <Col span="8">
                            
                        </Col>
                    </Row>
                    <Row>
                        <Button @click="create" icon="android-add" type="primary" size="large">{{L('Add')}}</Button>
                        <Button icon="ios-search" type="primary" size="large" @click="getpage" class="toolbar-btn">{{L('Find')}}</Button>
                    </Row>
                </Form>
                <div class="margin-top-10">
                    <Table :loading="loading" :columns="columns" :no-data-text="L('NoDatas')" border :data="list">
                    </Table>
                    <Page  show-sizer class-name="fengpage" :total="totalCount" class="margin-top-10" @on-change="pageChange" @on-page-size-change="pagesizeChange" :page-size="pageSize" :current="currentPage"></Page>
                </div>
            </div>
        </Card>
        <create-goods v-model="createModalShow" @save-success="getpage"></create-goods>
        <edit-goods v-model="editModalShow" @save-success="getpage"></edit-goods>
    </div>
</template>
<script lang="ts">
    import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
    import Util from '@/lib/util'
    import AbpBase from '@/lib/abpbase'
    import PageRequest from '@/store/entities/page-request'
    import CreateGoods from './create-goods.vue'
    import EditGoods from './edit-goods.vue'
    
    class PageGoodsRequest extends PageRequest{
        keyword:string='';
        isActive:boolean=null;
    }
    
    @Component({
        components:{CreateGoods,EditGoods}
    })
    export default class Goodss extends AbpBase{
        edit(){
            this.editModalShow=true;
        }
       
        pagerequest:PageGoodsRequest=new PageGoodsRequest();
        
        createModalShow:boolean=false;
        editModalShow:boolean=false;
        get list(){
            return this.$store.state.goods.list;
        };
        get loading(){
            return this.$store.state.goods.loading;
        }
        create(){
            this.createModalShow=true;
        }
        isActiveChange(val:string){
            if(val==='Actived'){
                this.pagerequest.isActive=true;
            }else if(val==='NoActive'){
                this.pagerequest.isActive=false;
            }else{
                this.pagerequest.isActive=null;
            }
        }
        pageChange(page:number){
            this.$store.commit('goods/setCurrentPage',page);
            this.getpage();
        }
        pagesizeChange(pagesize:number){
            this.$store.commit('goods/setPageSize',pagesize);
            this.getpage();
        }
        async getpage(){
            
            this.pagerequest.maxResultCount=this.pageSize;
            this.pagerequest.skipCount=(this.currentPage-1)*this.pageSize;
            
            await this.$store.dispatch({
                type:'goods/getAll',
                data:this.pagerequest
            })
        }
        get pageSize(){
            return this.$store.state.goods.pageSize;
        }
        get totalCount(){
            return this.$store.state.goods.totalCount;
        }
        get currentPage(){
            return this.$store.state.goods.currentPage;
        }
        columns=[{
            title:this.L('GoodsName'),
            key:'goodsName'
        },{
            title:this.L('Price'),
            key:'price'
        },{
            title:this.L('Describe'),
            key:'describe'
        },{
            title:this.L('Actions'),
            key:'Actions',
            width:150,
            render:(h:any,params:any)=>{
                return h('div',[
                    h('Button',{
                        props:{
                            type:'primary',
                            size:'small'
                        },
                        style:{
                            marginRight:'5px'
                        },
                        on:{
                            click:()=>{
                                this.$store.commit('goods/edit',params.row);
                                this.edit();
                            }
                        }
                    },this.L('Edit')),
                    h('Button',{
                        props:{
                            type:'error',
                            size:'small'
                        },
                        on:{
                            click:async ()=>{
                                this.$Modal.confirm({
                                        title:this.L('Tips'),
                                        content:this.L('DeleteGoodsConfirm'),
                                        okText:this.L('Yes'),
                                        cancelText:this.L('No'),
                                        onOk:async()=>{
                                            await this.$store.dispatch({
                                                type:'goods/delete',
                                                data:params.row
                                            })
                                            await this.getpage();
                                        }
                                })
                            }
                        }
                    },this.L('Delete'))
                ])
            }
        }]
        async created(){
            this.getpage();
        }
    }
</script>

 create-goods.vue代码:

<template>
    <div>
        <Modal
         :title="L('CreateNewGoods')"
         :value="value"
         @on-ok="save"
         @on-visible-change="visibleChange"
        >
            <Form ref="goodsForm"  label-position="top" :rules="goodsRule" :model="goods">
                <FormItem :label="L('GoodsName')" prop="goodsName">
                    <Input v-model="goods.goodsName" :maxlength="32" :minlength="2"></Input>
                </FormItem>
                <FormItem :label="L('Price')" prop="price">
                    <Input v-model="goods.price" :maxlength="32" :minlength="2"></Input>
                </FormItem>
                <FormItem :label="L('Describe')" prop="describe">
                    <Input v-model="goods.describe" :maxlength="1024"></Input>
                </FormItem>
                <FormItem :label="L('Qty')" prop="surplusQty">
                    <Input v-model="goods.surplusQty"  :maxlength="18"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">{{L('Cancel')}}</Button>
                <Button @click="save" type="primary">{{L('OK')}}</Button>
            </div>
        </Modal>
    </div>
</template>
<script lang="ts">
    import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
    import Util from '../../../lib/util'
    import AbpBase from '../../../lib/abpbase'
    import Goods from '@/store/entities/goods';
    @Component
    export default class CreateGoods extends AbpBase{
        @Prop({type:Boolean,default:false}) value:boolean;
        goods:Goods=new Goods();
        save(){
            (this.$refs.goodsForm as any).validate(async (valid:boolean)=>{
                if(valid){
                    await this.$store.dispatch({
                        type:'goods/create',
                        data:this.goods
                    });
                    (this.$refs.goodsForm as any).resetFields();
                    this.$emit('save-success');
                    this.$emit('input',false);
                }
            })
        }
        cancel(){
            (this.$refs.goodsForm as any).resetFields();
            this.$emit('input',false);
        }
        visibleChange(value:boolean){
            if(!value){
                this.$emit('input',value);
            }
        }
        goodsRule={
            goodsName:[{required: true,message:this.L('FieldIsRequired',undefined,this.L('GoodsName')),trigger: 'blur'}],
            // tenancyName:[{required:true,message:this.L('FieldIsRequired',undefined,this.L('TenancyName')),trigger: 'blur'}],
            // adminEmailAddress:[{required:true,message:this.L('FieldIsRequired',undefined,this.L('AdminEmailAddress')),trigger: 'blur'},{type: 'email'}]
        }
    }
</script>

edit-goods.vue代码:

<template>
    <div>
        <Modal
         :title="L('EditGoods')"
         :value="value"
         @on-ok="save"
         @on-visible-change="visibleChange"
        >
            <Form ref="goodsForm"  label-position="top" :rules="goodsRule" :model="goods">
                <FormItem :label="L('GoodsName')" prop="goodsName">
                    <Input v-model="goods.goodsName" :maxlength="32" :minlength="2"></Input>
                </FormItem>
                <FormItem :label="L('Price')" prop="price">
                    <Input v-model="goods.price" :maxlength="32" :minlength="2"></Input>
                </FormItem>
                <FormItem :label="L('Describe')" prop="describe">
                    <Input v-model="goods.describe" :maxlength="1024"></Input>
                </FormItem>
                <FormItem :label="L('Qty')" prop="surplusQty">
                    <Input v-model="goods.surplusQty"  :maxlength="18"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">{{L('Cancel')}}</Button>
                <Button @click="save" type="primary">{{L('OK')}}</Button>
            </div>
        </Modal>
    </div>
</template>
<script lang="ts">
    import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
    import Util from '../../../lib/util'
    import AbpBase from '../../../lib/abpbase'
    import Goods from '@/store/entities/goods';
    @Component
    export default class EditGoods extends AbpBase{
        @Prop({type:Boolean,default:false}) value:boolean;
        goods:Goods=new Goods();
        save(){
            (this.$refs.goodsForm as any).validate(async (valid:boolean)=>{
                if(valid){
                    await this.$store.dispatch({
                        type:'goods/update',
                        data:this.goods
                    });
                    (this.$refs.goodsForm as any).resetFields();
                    this.$emit('save-success');
                    this.$emit('input',false);
                }
            })
        }
        cancel(){
            (this.$refs.goodsForm as any).resetFields();
            this.$emit('input',false);
        }
        visibleChange(value:boolean){
            if(!value){
                this.$emit('input',value);
            }else{
                this.goods=Util.extend(true,{},this.$store.state.goods.editGoods);
            }
        }
        goodsRule={
            // name:[{required: true,message:this.L('FieldIsRequired',undefined,this.L('TenantName')),trigger: 'blur'}],
            // tenancyName:[{required:true,message:this.L('FieldIsRequired',undefined,this.L('TenancyName')),trigger: 'blur'}]
        }
    }
</script>

2.在store>entities目录下创建一个实体goods.ts

代码如下:

import Entity from './entity'

export default class Goods extends Entity<string>{
    goodsName:string;
    price:number;
    describe:string;
    surplusQty:number;    
} 

3.在store>modules下创建商品相关的请求服务器方法goods.ts

 代码如下:

import {Store,Module,ActionContext} from 'vuex'
import ListModule from './list-module'
import ListState from './list-state'
import Goods from '../entities/goods'
import Ajax from '../../lib/ajax'
import PageResult from '@/store/entities/page-result';
import ListMutations from './list-mutations'
interface GoodsState extends ListState<Goods>{
    editGoods:Goods;
}
class GoodsModule extends ListModule<GoodsState,any,Goods>{
    state={
        totalCount:0,
        currentPage:1,
        pageSize:10,
        list: new Array<Goods>(),
        loading:false,
        editGoods:new Goods()
    }
    actions={
        async getAll(context:ActionContext<GoodsState,any>,payload:any){
            context.state.loading=true;
            let reponse=await Ajax.get('/api/services/app/Goods/GetAll',{params:payload.data});
            context.state.loading=false;
            let page=reponse.data.result as PageResult<Goods>;
            context.state.totalCount=page.totalCount;
            context.state.list=page.items;
        },
        async create(context:ActionContext<GoodsState,any>,payload:any){
            await Ajax.post('/api/services/app/Goods/Create',payload.data);
        },
        async update(context:ActionContext<GoodsState,any>,payload:any){
            await Ajax.put('/api/services/app/Goods/Update',payload.data);
        },
        async delete(context:ActionContext<GoodsState,any>,payload:any){
            await Ajax.delete('/api/services/app/Goods/Delete?Id='+payload.data.id);
        },
        async get(context:ActionContext<GoodsState,any>,payload:any){
            let reponse=await Ajax.get('/api/services/app/Goods/Get?Id='+payload.id);
            return reponse.data.result as Goods;
        }
    };
    mutations={
        setCurrentPage(state:GoodsState,page:number){
            state.currentPage=page;
        },
        setPageSize(state:GoodsState,pagesize:number){
            state.pageSize=pagesize;
        },
        edit(state:GoodsState,goods:Goods){
            state.editGoods=goods;
        }
    }
}
const goodsModule=new GoodsModule();
export default goodsModule;

4.在store的index.ts文件里引入goods模块

 

 5.在路由文件里添加商品router文件夹下的router.ts

 

 6.大功告成可以运行看下结果yarn serve启动项目(不知道怎么启动项目的请回到第一篇文章重新回顾)

 

 

 

 注意:是不是发现到处都是英文,可能有人就想直接去改代码里的名称了直接改为中文这样是可以的但是你发现你切换语言之后他不会变一直都是固定的,所以这里需要在后台配置文件对应的语言crazy-zh-Hans.xml里增加配置.

我们去配置两个尝试一下(后台改动配置重新启动,前端只需要刷新就生效了)

 

 再来看看结果

 

 

 

下一篇讲一下abp框架的权限相关创建.

对你有帮助的话点个推荐,大神请直接忽视或者指点一二

wyb926
关注
ABP框架增删改查（第一章 添加）
guocs415的博客
01-14 1135
ABP 框架基础增晒改查 中添加（ADD统一返回格式)
ABP.NET + VUE ts 从0开始入门学习，到实现增删改查，超级详细
kimizhou_blog的专栏
03-15 1322
如果你遇见编译不通过问题，可能是环境问题，因为我用的是.net 5.0, 所以我需要安装 .net 5.0 sdk 和 .net 5.0 runtime 这2个。安装以上2个exe应该就可以编译通过了，不过如果你要在iis 上部署成功的话，需要安装exe更多了，你可以参考 我的另一个博客。高层语言疯狂的封装后，发现很多老技术都用不上了，底层语言大多用不上了，比如abp框架，废话不多说了，下面直接上教程。如果你出现错误，可能是你的电脑没安装node.js ，
ABP框架增删改查（统一格式 增删改）基础
guocs415的博客
01-19 2195
ABP框架增删改查（统一格式 增删改）基础
html5的增删改查项目,ABP入门系列（5）——展现层实现增删改查
weixin_36444104的博客
06-17 376
ABP入门系列目录——学习Abp框架之实操演练这一章节将通过完善Controller、View、ViewModel，来实现展现层的增删改查。最终实现效果如下图： 一、定义ControllerABP对ASP.NET MVC Controllers进行了集成，通过引入Abp.Web.Mvc命名空间，创建Controller继承自AbpController， 我们即可使用ABP附加给我们的以下强大功能：...
abp+vue.js学习
weixin_30631587的博客
08-27 550
教程https://blog.csdn.net/yiershan1314/article/details/77875679 vue.js安装https://blog.csdn.net/wyljz/article/details/77193778 abp详细特性介绍 https://www.cnblogs.com/xajh/tag/ABP/default.html?page=3 转载于:...
abp-vue-admin-element-typescript:带有ABP的Vue管理员
03-29
这是一个基于 typescript 的Abp框架后台管理界面 前端文档 截图 相关项目 初步项目 （abp vNext） （EasyAbp） 打字稿版本： （此项目的模拟服务器） （该项目的文档来源） Javascript版本： （vue2.0最小...
基于vue-vben-admin 的Abp框架后台管理界面 abp-next-admin-master.zip
最新发布
07-27
基于vue-vben-admin 的Abp框架后台管理界面 abp-next-admin-master.zip
AbpShop 是基于.Net core ABP, Uni-App跨平台,Vue框架基础开发
08-12
AbpShop是一个基于.Net Core架构的开源项目，它利用了ABP框架的高效能和模块化特性，同时结合了Uni-App跨平台开发工具和Vue前端框架，为开发者提供了一个强大的电商平台开发基础。这个项目旨在简化开发流程，帮助...
core+vue的abp框架
12-01
"core+vue的abp框架"是一个基于现代技术栈的开发框架，主要用于构建高效、可扩展的企业级应用程序。在这个框架中，前端采用了流行的JavaScript库Vue.js，提供了丰富的组件化功能和响应式用户界面设计，而后端则采用...
ABP基础实践训练，一个简易的博客（增删改查）等功能 二：
Lethe星空的博客
01-17 6363
个人认为应用服务层的搭建是ABP框架的核心,掌握了这个就能基本上手工作了，在上一个博客中我们创建了一个分类表实体类，这次我们就围绕这个实体类实现增删改查的方法。 一：创建好相关的目录结构 首先我们在应用层下建立相关的文件夹存放Dto（数据传输对象）以及接口、方法实现类等，使用Dto可以更好的做到表现层与模型层的解耦，也可以更方便序列化！ 二：实现Dto类与实体的映射 创建一个基
简单基础的管理系统教程（学会增删改查功能）
11-02
里面的代码包含管理系统最基础的增删改查功能 可以帮助你练习有关管理系统增删改查的功能 ，希望对你有用处！！
怎样优雅地增删查改（三）：业务用户的ABP框架提供的增删改查的基类增删查改
dbg89566611的博客
07-12 156
当鉴权用户更新时
怎样优雅地增删查改（三）：ABP框架提供的增删改查的基类业务用户的增删查改
abc12586555的博客
07-12 309
同步器将更新业务用户的基本信息
怎样优雅地增删查改（三）：业ABP框架提供的增删改查的基类务用户的增删查改
dbg89566611的博客
07-19 150
当鉴权用户更新时
asp.net zero 8.2 学习-5-实现增删改查服务及API测试
一根火柴博客
02-29 605
在asp.net zero 中实现单表增删改查： 编写增删改查服务方法 API测试服务 删除实体 注意在删除实体Delete(EntityDto input)，可以先查询再修改，也可以直接删除实体，删除实体注意要转换成主键类型 public async Task Delete(EntityDto input) { //先查询再修改 //var demoObject = awai...
ABP实践(3)-ASP.NET Core 2.x版本(从创建实体到输出api)简单实现商品列表及增删改
zhanglong_longlong的专栏
07-30 227
创建Goods实体 在领域层xxx.Core项目[新建文件夹Goods;文件夹名称和类名称一样后面引用的时候需要Goods.Goods,所以建议文件夹名称最好是不要与类同名]在文件夹下创建Goods.cs实体类 [Table("goods")] public class Goods : AuditedAggregateRoot<Guid> { /// <summary> /// 商品名称 //.
ABP vue版
weixin_30291791的博客
04-05 652
1.官网下载模板（选vue版本）：http://www.aspnetboilerplate.com/Templates 2.创建数据库，修改连接字符串，执行update-database生成表结构 3.运行WEB API 项目： xx.Web.Host 4.启动VUE前端，需要使用yarn还原包 1 npm install -g yarn 安装yarn 2 ...
ABP框架—前台：Vue项目启动（4）
预立数据科技
06-19 3606
1.安装Node.js环境 官网地址：https://nodejs.org/en/download/ 安装完成后，命令窗口输入：node -v，如打印版本信息则说明成功 2.npm安装VUE脚手架(vue-cli) 此步骤依赖node坏境 命令窗口输入：npm install -g vue-cli //-g是全局安装 安装完成后，命令窗口输入：vue -V 如打印版本信息则说...
Vue-Vben-Admin实现的Abp框架后台管理系统
资源摘要信息:"基于vue-vben-admin的Abp框架后台管理界面的源代码" 首先，我们需要了解的是"vue-vben-admin"。这是一个基于Vue.js和Vben UI设计的后台前端解决方案，它提供了一套开箱即用的基础模板和组件库，方便...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值