jquery项目引入vue和elementui遇到的坑

本文详述了如何在非Vue项目中正确引入Element UI,包括CSS样式问题、Vue实例挂载、form表单事件冲突、Vue methods中函数调用难题,以及解决方法,特别关注this指向问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 切记引入elementui的前提是引入vue

常见出错的情况:
一个简单的html页面或者一个非vue的项目,想要引入elementui的组件,然后引入elementui之后发现样式不起作用,很大一个原因就是没有引入vue

为方便此处CDN引入

 <!--引入 element-ui 的样式,-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 必须先引入vue,  后使用element-ui -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

引入vue之后发现还是不显示样式
原因:引入vue就得有挂载 所以vue的基本“样子”得有

此处简单举个el-button的例子

 <div id="app">
 		<el-button type="primary">主要按钮</el-button>
 </div>

<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	    
	  }
	})
</scipt>
  1. form标签里边自己写的按钮点击后无法调用事件

是以下这么个情况

<form>
	 <input type="text" />
	 ..............不详细写了
	 <button @click="submit()">提交</button>
</form>

点击提交按钮发现submit()方法调用不了

网上百度了半天最终原因是:
一旦写了form标签,form会有本身的提交函数,自己写的提交就调用不了

解决方法:
把form自带的提交给他关了
可以单独在<script></script>中写个函数
也可简单一点直接写在form标签里

<form onsubmit="return false;">
.....
</form>
  1. vue的methods中函数调用不了

实际场景是这样:

//代码如下
<div id="app">	
		......
 		<el-button type="primary" @click=“method2()”>主要按钮</el-button>
 </div>

<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	   
	  },
	  mounted(){
	  	this.method1() 
	  },
	  methods: {
			method1(){
				axios...发了一个请求 记得如果要用axios记得引入axios
			},//不详细写具体的方法了
			method2(){
				axios...发了一个请求 记得如果要用axios记得引入axios
			}
		}
	})
</scipt>


//实际情况
method2()的axios请求一直发不出去 但是method1() 就可以
说明后端接口没问题【这是当时在排错】

原因:????欢迎大家评论区指点
大概就是this的指向这些问题吧
解决方法:

//在created里边加两行
<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	   
	  },
	  created(){
         var that = this
         window.method1 = that.method1
      },
	  mounted(){
	  	this.method1() 
	  },
	  methods: {
			method1(){
				axios...发了一个请求 记得如果要用axios记得引入axios
			},//不详细写具体的方法了
			method2(){
				axios...发了一个请求 记得如果要用axios记得引入axios
			}
		}
	})
</scipt>
  1. 类似3的问题 从后端请求回来的数据赋值给this.变量 页面无法渲染请求回来的数据

实际情况

//我们想要的效果是页面渲染出我们从后端请求回来的数据,但是实际上并没有
//代码如下
<div id="app">	
		{{message}}
 </div>

<script>
	var app = new Vue({
	  el: '#app',
	  data() {
         return{
              	message:""
           }
      },
      //或者这样写也行 这不影响
      data: {
		message:""
	  }
	  mounted(){
	  	this.method1() 
	  },
	  methods: {
		method1(){
			axios.get(url.then(res => {
              this.message = res.data
            })
		}
	})
</scipt>

解决方法:

methods: {
	method1(){
		var self = this //此处this是全局
		axios.get(url.then(res => {
        	self.message = res.data //此处我们定义的self是局部
        })
 }

 

有些问题在之前用vue-cli搭建的前端项目中从来没有遇到过的,以上是基于在html文件中CDN引入vue时候遇到的问题

博客内容写的不够严谨和不够清晰的地方欢迎大家指正交流。

### 使用Spring BootVue开发自习室预约系统 #### 项目概述 基于Spring BootVue的智慧自习室预约管理系统,通过集成先进的Java后端框架Spring Boot与前端框架Vue,实现了高效、便捷的自习室预约与管理功能。该系统采用MySQL数据库存储数据,支持多用户角色(如管理员与学生),提供自习室信息查询、座位预订、留言反馈、公告发布等核心功能[^2]。 #### 技术栈 - **开发语言**: Java (用于后端),JavaScript (用于前端) - **数据库**: MySQL - **后端框架**: Spring Boot (Spring + Spring MVC + MyBatis) - **前端框架**: Vue.js + Element UI - **其他技术**: HTML, CSS, JavaScript, jQuery, ECharts #### 系统架构 整体系统采用B/S架构,便于维护与扩展。前后端分离的设计模式确保了系统的灵活性可扩展性。前端负责用户交互界面,而后端则处理业务逻辑并提供API接口给前端调用[^3]。 #### 功能模块划分 1. 用户管理:注册登录、权限控制; 2. 自习室管理:添加删除修改自习室信息; 3. 座位管理:查看剩余座位情况、选择具体位置; 4. 订单管理:创建取消订单记录; 5. 公告板:发布公告通知重要事项; 6. 反馈建议:收集用户意见以便改进服务。 #### 实现步骤 ##### 创建Spring Boot工程 首先,在IDEA或其他IDE中新建一个Spring Initializr项目,勾选Web、JPA、Thymeleaf等相关依赖项来初始化基础结构。 ```xml <dependencies> <!-- Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- JPA & MySQL Connector --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> </dependencies> ``` 配置`application.properties`文件连接到本地MySQL实例: ```properties spring.datasource.url=jdbc:mysql://localhost:3306/study_room?useSSL=false&serverTimezone=UTC spring.datasource.username=root spring.datasource.password=password spring.jpa.hibernate.ddl-auto=update ``` 定义实体类表示数据库表中的对象模型,比如User.java: ```java @Entity public class User { @Id private Long id; private String name; private String password; // Getters and Setters... } ``` 编写Repository接口继承自`JpaRepository<T,ID>`以实现CRUD操作方法: ```java @Repository public interface UserRepository extends JpaRepository<User,Long>{ } ``` 控制器接收HTTP请求并将参数传递给Service层进行处理后再返回JSON格式的结果集给客户端: ```java @RestController @RequestMapping("/api/users") public class UserController { @Autowired UserService userService; @GetMapping("/{id}") public ResponseEntity<?> getUserById(@PathVariable(value="id") long userId){ Optional<User> userOpt = userService.findById(userId); if(!userOpt.isPresent()){ return new ResponseEntity<>(HttpStatus.NOT_FOUND); } return new ResponseEntity<>(userOpt.get(), HttpStatus.OK); } // Other CRUD operations... } ``` ##### 构建Vue前端应用 安装Node.js环境之后可以利用vue-cli脚手架快速搭建起一个新的Vue CLI项目作为项目的前端部分。 执行命令行指令如下所示: ```bash npm install -g @vue/cli vue create study-room-client cd study-room-client/ yarn add axios element-ui --save ``` 编辑src/main.js引入ElementUI样式资源包: ```javascript import 'element-ui/lib/theme-chalk/index.css'; import { Message } from 'element-ui'; Vue.use(ElementUI); new Vue({ render: h => h(App), }).$mount('#app') ``` 在components目录下新增Login.vue组件用来渲染登陆页面模板代码片段: ```html <template> <div class="login-container"> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <h3>Login Form</h3> <el-form-item prop="username"> <el-input type="text" v-model="ruleForm.username"></el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" v-model="ruleForm.password"></el-input> </el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button> </el-form> </div> </template> <script> export default { data() { var validatePass = (rule, value, callback) => { if (!value) { return callback(new Error('Please input the password')); } callback(); }; return { ruleForm: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [{ validator: validatePass }] } }; }, methods:{ submitForm(formName){ this.$refs[formName].validate((valid)=>{ if(valid){ console.log(this.ruleForm); let formData=new FormData(); Object.keys(this.ruleForm).forEach(key=>{ formData.append(key,this.ruleForm[key]); }); axios.post('/api/login',formData,{ headers:{'Content-Type':'multipart/form-data'} }).then(response=>{console.log(response);}) .catch(error=>alert(`Error:${error}`)); }else{ alert('提交失败'); return false; } }); } } }; </script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值