48-10000 Vue前后端的连接程序的练习

 

 

  JavaScript代码 

  1 <script>
  2 //复制JavaScript代码， 写接口代码去测试  辛巳日 
  3 import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module
  4 import url from "@/plugins/urlHelper.js";
  5 export default {
  6   data() {
  7     return {
  8       editorConfig: {
  9         initialFrameHeight: 500, //设置高度
 10         initialFrameWidth: "100%", //设置宽度
 11         UEDITOR_HOME_URL: url.getUEConfig(),
 12         serverUrl: url.getUE(),
 13       },
 14       query: {}, //对象
 15       loading: false,
 16       currentPage4: 1,
 17       pageSize: 10,
 18       total: 0,
 19       tableData: [],
 20       form: {}, //表单对象
 21       dialogVisible: false,
 22       submiting: false,
 23       id: 0,
 24       domain: url.getDomain(),
 25     };
 26   },
 27   components: {
 28     VueUeditorWrap,
 29   },
 30   methods: {
 31     handleSizeChange(val) {
 32       this.pageSize = val;
 33       this.currentPage4 = 1;
 34       this.getList();
 35     },
 36     handleCurrentChange(val) {
 37       this.currentPage4 = val;
 38       this.getList();
 39     },
 40     //筛选
 41     filterTag(filter) {
 42       var val = filter["isEnable"][0];
 43       this.form.isEnable = val;
 44       //刷新列表
 45       this.getList();
 46     },
 47     //搜索查询
 48     selList: function () {
 49       this.currentPage4 = 1;
 50       this.getList();
 51     },
 52     getList: function () {
 53       var _this = this;
 54       _this.loading = true;
 55       var params = _this.query;
 56       params.pageindex = _this.currentPage4;
 57       params.pagesize = _this.pageSize;
 58       var link = url.getArt("getlist_info");
 59       $.get(link, params, (data) => {
 60         _this.loading = false;
 61         _this.tableData = data.list;
 62         _this.total = data.total;
 63       });
 64     },
 65     //提交表单
 66     submitForm(formName) {
 67       var _this = this;
 68       var link = url.getArt("save_info");
 69       var info = this.form;
 70       this.$refs.form.validate((valid) => {
 71         if (valid) {
 72           this.submiting = true;
 73           //提交后台添加
 74           $.post(link, info, (res) => {
 75             _this.submiting = false;
 76             if (res.status) {
 77               _this.dialogVisible = false;
 78               _this.getList();
 79               _this.$message({
 80                 type: "success",
 81                 message: res.msg,
 82               });
 83             } else {
 84               _this.$message({
 85                 type: "error",
 86                 message: res.msg,
 87               });
 88             }
 89           });
 90         } else {
 91           return false;
 92         }
 93       });
 94     },
 95     //编辑
 96     editClick: function (row) {
 97       // this.form = Object.assign({}, row);
 98       this.dialogVisible = true;
 99       var id = row.id;
100       var link = url.getArt("getmodel_info");
101       $.get(link, { id: id }, (res) => {
102         this.form = res;
103       });
104     },
105     //删除
106     delClick: function (row) {
107       var _this = this;
108       var link = url.getArt("delete_info"); //获取请求地址
109       var id = row.id; //获取对象id
110       this.$confirm("确定要删除？", "提示", {
111         confirmButtonText: "确定",
112         cancelButtonText: "取消",
113         type: "warning",
114       })
115         .then(() => {
116           $.post(link, { id: id }, (res) => {
117             _this.btnLoading = false;
118             if (res.status) {
119               _this.msg = res;
120               _this.getList();
121               this.$message({
122                 type: "success",
123                 message: "删除成功!",
124               });
125             } else {
126               this.$message({
127                 type: "error",
128                 message: res.msg,
129               });
130             }
131           });
132         })
133         .catch(() => {
134           this.$message({
135             type: "info",
136             message: "已取消删除",
137           });
138         });
139     },
140   },
141   mounted() {
142     //获取服务器列表
143     this.getList();
144   },
145 };
146 </script>
View Code

  去写C#接口代码

  数据库代码 

 1 修改数据库，链接字符串。为本地数据库，进行测试练习 

 

     然后重新启动Vue， 直接输入Vue页面组件，可以打开。可以打开就可以测试前端页面的了，其他的逐步完善的了。 

posted @ 2021-11-29 17:42  优敏行  阅读(54)  评论(0)    收藏  举报