标签 Vue 下的文章 - 星如雨

登录

标签搜索

星如雨

累计撰写 48 篇文章
累计收到 2 条评论

搜索到 4 篇与的结果

[mqtt] vue3-ts-mqtt 封装使用Vue3-ts 和 Pinia 封装一下MQTT
- 2023年05月28日
- 0 阅读
- 0 评论
- 0 点赞
2022-05-12
[Java] Springboot 自定义登录页面 LoginController@Controller public class LoginController { // 设置 login页面为get方式传参 @GetMapping("/userLogin") public String login(Model model) { return "login/login"; } }login.html<div id="app"> <div style="width: 275px;margin: 130px auto;"> <h2>用户登录</h2> <el-form method="post" action="/userLogin"> <el-form-item> <el-input v-model="username" type="text" name="name" placeholder="用户名" clearable autofocus="true"></el-input> </el-form-item> <el-form-item> <el-input v-model="pwd" type="password" name="pwd" placeholder="密码" clearable show-password></el-input> </el-form-item> <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"> <el-form-item> <el-checkbox name="rememberme" v-model="rememberMe">记住密码</el-checkbox> </el-form-item> <el-form-item> <el-button native-type="submit" type="primary">登录</el-button> <el-button type="primary" plain>注册</el-button> </el-form-item> </el-form> </div> </div> <script src="https://fastly.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> let vue = new Vue({ el: "#app", type : "module", data: function () { return { username: "", pwd: "", rememberMe: false } }, mounted: function () { }, }) </script>SecurityConfig@EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Autowired private DataSource dataSource; // UserDetailsService 安全认证 @Autowired private UserDetailsServiceImpl userDetailsService; @Override protected void configure(AuthenticationManagerBuilder auth) throws Exception { BCryptPasswordEncoder encoder = new BCryptPasswordEncoder(); auth.userDetailsService(userDetailsService).passwordEncoder(encoder); } @Bean public JdbcTokenRepositoryImpl tokenRepository(){ JdbcTokenRepositoryImpl jr=new JdbcTokenRepositoryImpl(); jr.setDataSource(dataSource); return jr; } @Override protected void configure(HttpSecurity http) throws Exception { // 配置页面访问权限 /** * "/" 根目录 resources/template/index.html 权限为所有人均可访问 * "/detail/**" /detail 下面的所有目录或页面vip权限用户均可访问 * "/detail/common/**" /detail/common/** 下面的所有页面 common 权限用户均可访问 * anyRequest 所有的请求，必须通过身份认证并且开启用户登录机制 */ http.authorizeRequests() .antMatchers("/").permitAll() .antMatchers("/getUserBySession").permitAll() .antMatchers("/login/**").permitAll() .antMatchers("/detail/**").hasRole("vip") .antMatchers("/detail/common/**").hasRole("common") .anyRequest().authenticated().and().formLogin(); /** * 自定义用户登录控制 * 登录页面 /login * 需要参数为 name 用户名 pwd 用户密码 * 默认成功路径 / * 错误路径 /login */ http.formLogin() .loginPage("/userLogin").permitAll() .usernameParameter("name").passwordParameter("pwd") .defaultSuccessUrl("/") .failureUrl("/userLogin?res=error") .and().logout(); /** * 退出登录 */ http.logout() .logoutUrl("/userLogout") .logoutSuccessUrl("/userLogin"); } }
- 2022年05月12日
- 49 阅读
- 0 评论
- 0 点赞
2022-03-08
[Vue] Vue 使用ElementUI组件安装 ElementUI打开项目所在根目录在地址栏输入 cmd + 回车打开命令提示符输入安装命令 npm i element-ui -S 进行安装npm i element-ui -S安装完成进入编辑器打开项目打开package.json 查看 defendants 属性中是否有 element-ui{x} 安装成功使用UI组件进入main.js 文件import ElementUI from 'element-ui';// ElementUI 组件 import 'element-ui/lib/theme-chalk/index.css';// Element UI 组件样式 Vue.use(ElementUI);// 使用ElementUI打开 App.vue 文件 <el-button>ElementUI button</el-button>查看在命令提示符窗口输入 npm run serve, 启动程序npm run serve{x} 运行成功进入浏览器输入http://localhost:8080 即可查看效果，组件已成功使用
- 2022年03月08日
- 162 阅读
- 0 评论
- 0 点赞
2022-03-07
[Vue] 创建Vue项目 Vue运行环境使用 Node.jsNode.js官网下载# 配置源 npm config set registry https://registry.npm.taobao.org # 查看源配置 npm config get registry安装脚手架 Vue@cliVue-Cli中文站点Win + R 输入cmd 打开命令终端安装脚手架安装命令：npm install -g @vue/cli 全局安装，安装比较慢npm install -g @vue/cli查看Vue版本vue --version创建vue项目选择项目的保存路径，在这个文件夹的路径栏输入cmd命令：vue create object_nameobject_name: 为项目的名称，会自动创建一个和项目名称一样的目录vue create iot选择 Vue2 就可以了点击回车进入项目文件夹，运行服务cd iot npm run serve此时我们的项目就已经建好了，只需要在浏览器中输入 http://localhost:8080 就可以访问了
- 2022年03月07日
- 90 阅读
- 0 评论
- 0 点赞