1. 首页
  2. 分类
  3. 前端技术
【.NET全栈】ASP.NET开发Web应用——AJAX开发技术
System
2024-08-13
所有,ajax

在ASP.NET中使用AJAX技术，可以通过JavaScript调用服务器端的代码而无需刷新页面。以下是一个简单的示例，展示了如何使用ASP.NET MVC和jQuery实现AJAX请求。

  1. 创建一个ASP.NET MVC项目。
  2. 添加一个控制器方法，例如：



public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult GetData(string input)
    {
        // 处理input并返回结果
        string result = "处理后的数据：" + input;
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}
  1. 在视图中添加JavaScript代码，使用jQuery发送AJAX请求：



@{
    Layout = null;
}
 
<!DOCTYPE html>
<html>
<head>
    <title>AJAX示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#ajaxButton').click(function () {
                var input = $('#inputField').val();
                $.ajax({
                    url: '@Url.Action("GetData", "Home")',
                    type: 'POST',
                    data: { input: input },
                    success: function (data) {
                        $('#result').text(data);
                    },
                    error: function () {
                        alert('Error occurred');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div>
        输入数据：<input type="text" id="inputField" />
        <button id="ajaxButton">发送</button>
        <div id="result"></div>
    </div>
</body>
</html>

在这个示例中，我们创建了一个文本输入框和一个按钮，点击按钮时，使用jQuery触发AJAX POST请求，将输入框的值发送到服务器端的GetData方法。服务器端处理完数据后，返回JSON格式的响应，该响应在成功回调中被接收并显示在页面上的<div id="result"></div>元素中。

- 阅读更多 -
SpringBoot整合SpringSecurit实现ajax的登录、退出、权限校验
System
2024-08-13
所有,ajax

在Spring Boot整合Spring Security实现AJAX登录、登出及权限检查的核心步骤如下：

  1. 添加Spring Security依赖。
  2. 配置Spring Security。
  3. 创建登录和登出的Controller。
  4. 添加AJAX登录和登出的JavaScript代码。
  5. 添加权限检查的注解。

以下是实现上述功能的示例代码：

pom.xml添加依赖：




<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

SecurityConfig.java配置Spring Security：




@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
 
    @Autowired
    private UserDetailsService userDetailsService;
 
    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
    }
 
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
 
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .csrf().disable() // 禁用CSRF保护
            .authorizeRequests()
                .antMatchers("/login").permitAll() // 允许登录页面
                .anyRequest().authenticated() // 其他请求需要认证
            .and()
                .formLogin() // 启用表单登录
                .loginProcessingUrl("/doLogin") // 指定登录处理URL
                .successHandler(ajaxAuthenticationSuccessHandler()) // 登录成功处理
                .failureHandler(ajaxAuthenticationFailureHandler()); // 登录失败处理
    }
 
    @Bean
    public AuthenticationSuccessHandler ajaxAuthenticationSuccessHandler() {
        return (request, response, authentication) -> response.setStatus(HttpStatus.OK.value());
    }
 
    @Bean
    public AuthenticationFailureHandler ajaxAuthenticationFailureHandler() {
        return (request, response, exception) -> response.setStatus(HttpStatus.UNAUTHORIZED.value());
    }
}

UserController.java添加AJAX登录和登出：




@RestController
public class UserController {
 
    @Autowired
    private AuthenticationManager authenticationManager;
 
    @Autowired
    private JwtTokenUtil jwtTokenUtil;
 
    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestParam String username, @RequestParam String password) {
        try {
            Authentication authentication = authenticationManager.authenticate(
- 阅读更多 -
Vue学习|Vue快速入门、常用指令、生命周期、Ajax、Axios
System
2024-08-13
所有,ajax

在Vue.js中，数据和DOM是双向绑定的，所以我们不需要手动操作DOM。Vue.js提供了一些常用的指令，如v-if、v-for、v-bind等，还有组件系统，可以让我们用更自然的方式构建界面。

  1. Vue快速入门



<div id="app">
  {{ message }}
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
  1. Vue常用指令



<div id="app">
  <!-- 文本插值 -->
  <p>{{ message }}</p>
 
  <!-- 条件渲染 -->
  <p v-if="seen">现在你看到我了</p>
 
  <!-- 绑定属性 -->
  <img v-bind:src="imageSrc">
  <!-- 缩写 -->
  <img :src="imageSrc">
 
  <!-- 事件绑定 -->
  <button v-on:click="reverseMessage">反转消息</button>
  <!-- 缩写 -->
  <button @click="reverseMessage">反转消息</button>
 
  <!-- 循环 -->
  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
 
  <!-- 按键绑定 -->
  <input v-on:keyup.enter="submit">
</div>
  1. Vue生命周期



new Vue({
  data: {
    // ...
  },
  created: function () {
    // 实例被创建后调用
  },
  mounted: function () {
    // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用
  },
  // ...
})
  1. Vue Ajax和Axios



<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
<script>
var app = new Vue({
  // ...
  methods: {
    fetchData: function () {
      var self = this;
      axios.get('api/data')
        .then(function (response) {
          self.data = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
})
</script>

以上代码展示了如何在Vue应用中使用Axios进行HTTP请求获取数据。在实际开发中，Vue.js通常与现代JavaScript框架（如Vuex和Vue Router）一起使用，以及各种UI库，如Element UI、Bootstrap Vue等。

- 阅读更多 -
Ajax入门
System
2024-08-13
所有,ajax

Ajax（Asynchronous JavaScript and XML）是一种创建交互式网页的技术，可以使网页的更新不需要重新加载整个页面。

以下是一个简单的Ajax请求示例，使用JavaScript的XMLHttpRequest对象：




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request was unsuccessful');
    }
  }
};
 
// 发送请求
xhr.send();

在这个例子中，我们创建了一个XMLHttpRequest对象，并对它进行了配置，以发送一个GET请求到指定的URL。我们还定义了一个回调函数，当请求的状态发生变化时会被调用，它会检查请求是否成功完成，并处理响应数据。

注意：现代浏览器已经支持Fetch API，它是Ajax的现代替代品，提供了更好的语法和更多的功能。上述代码使用了XMLHttpRequest，因为它是Ajax的基础，而在实际开发中，你可能会更多地使用Fetch API。

- 阅读更多 -
【recast-navigation-js】使用three.js辅助绘制Agent
System
2024-08-13
所有,javascript



// 引入RecastNavigation和Three.js相关模块
const Recast = require('recastnavigation');
const THREE = require('three');
 
// 假设我们已经有了一个three.js的场景(scene)和相机(camera)
 
// 创建一个Agent，使用Three.js的Mesh作为表现
const agent = new Recast.DefaultAgent(Recast.SamplePolyFlags.SAMPLE_POLY_ALL);
const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(2, 2, 2),
    new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })
);
scene.add(mesh);
agent.mesh = mesh;
agent.radius = 1;
agent.height = 2;
agent.maxSlope = 45 * Math.PI / 180;
agent.stepHeight = 0.4;
 
// 设置Agent的位置和目标位置
agent.setPos(0, 0, 0);
agent.setTarget(20, 0, 20);
 
// 通过detour的navmesh数据计算路径
const navMesh = /* 获取到的detour navmesh数据 */;
const path = new Recast.NavMeshQuery(navMesh).findPath(agent.pos, agent.target, agent);
 
// 使用计算出的路径和Three.js的Line进行绘制
const geometry = new THREE.Geometry();
path.forEach(point => {
    geometry.vertices.push(
        new THREE.Vector3(point[0], point[1], point[2])
    );
});
const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x0000ff }));
scene.add(line);
 
// 注意：这只是一个简化的示例，实际使用时需要处理更多的细节，例如更新Agent的位置和绘制路径等。

这段代码展示了如何使用RecastNavigation库中的DefaultAgent和Three.js集成库来计算和绘制一个Agent的路径。这是一个基本的示例，实际应用中可能需要更多的配置和错误处理。

- 阅读更多 -
js实现走马灯效果
System
2024-08-13
所有,javascript

走马灯效果通常指的是一个元素在页面上循环滚动，类似于电视上的走马灯新闻。以下是一个简单的JavaScript函数，用于实现基本的走马灯效果：




function marqueeEffect(selector, speed) {
  const element = document.querySelector(selector);
  const parent = element.parentNode;
  const clonedElement = element.cloneNode(true);
 
  // 将原始元素和克隆元素添加到父元素中
  parent.appendChild(clonedElement);
 
  // 创建一个定时器来持续移动元素
  let left = 0;
  setInterval(() => {
    left -= speed;
    element.style.transform = `translateX(${left}px)`;
 
    // 当元素移出视野时，将其位置重置
    if (left <= -element.offsetWidth) {
      left = 0;
      element.style.transform = '';
    }
  }, 20); // 20毫秒移动一次
}
 
// 使用函数
marqueeEffect('#marquee', 1); // 参数是元素的选择器和滚动速度

HTML部分：




<div id="marquee">
  <p>这是走马灯效果的文本内容</p>
</div>

这段代码会使得id为marquee的元素中的内容不断循环滚动。你可以根据需要调整speed参数来控制滚动速度。

- 阅读更多 -
js逆向-3- js语法基础&js反爬原理
System
2024-08-13
所有,javascript

在JavaScript中，常见的逆向思维主要体现在对代码逻辑的理解和运用，以及对加密、混淆代码的破解上。以下是一些基本的JavaScript语法和反爬虫原理的简单介绍。

  1. JavaScript语法基础：

    • 变量声明：var, let, const
    • 控制流程：if 语句, for 循环, while 循环
    • 函数定义：function 关键字
    • 对象和数组：使用 {} 或 [] 创建
    • 事件处理：addEventListener 或 onclick

  2. JavaScript反爬虫原理：

    • 动态生成内容：JavaScript 可以通过API动态生成页面内容，使得静态爬虫无法获取。
    • 异步加载数据：使用 XMLHttpRequest 或 fetch 进行异步数据加载，避免同步读取。
    • 行为验证：例如Google 的 reCAPTCHA，通过复杂的行为验证来阻止机器人。
    • 代码混淆和混淆技巧：如变量名、函数名使用混淆，使用压缩工具压缩代码，混淆字符串和数字，使用自执行函数等。

解决方法：

  • 分析网络请求：观察和模拟API请求，使用代理、Charles 或 Fiddler 等工具抓取和分析网络交互。
  • 分析和逆向JavaScript：使用浏览器开发者工具(F12)，查看源码逻辑，使用JavaScript调试工具，如Debugger。
  • 逆向和破解混淆代码：这通常需要深入理解JavaScript，有时也需要机器学习和图像识别技术。

注意：逆向和破解复杂的JavaScript代码可能涉及法律和道德风险，确保您只对可干净的网站进行研究。

- 阅读更多 -
原理篇：js为什么会阻碍浏览器的渲染
System
2024-08-13
所有,javascript

JavaScript在浏览器中运行时，会阻碍浏览器的渲染过程。这是因为JavaScript引擎是单线程的，意味着同一时间只能执行一个任务。当JavaScript代码在执行时，浏览器无法执行其他任务，如渲染页面或处理用户交互，这就是所谓的"阻塞"。

为了解决这个问题，浏览器将渲染和其他交互性任务分配给主线程，而将JavaScript执行分配给另一个线程（通常是Event Loop）。但在某些情况下，例如当执行较为复杂的计算或处理大量数据时，JavaScript执行的时间可能会比预期长，导致浏览器无法及时响应其他任务。

为了提高用户体验，开发者需要尽量减少JavaScript执行的时间，可以采取以下措施：

  1. 分批进行复杂计算，使用requestAnimationFrame、setTimeout或setInterval等方法来给其他任务更多的执行机会。
  2. 对于不需要立即执行的代码，可以使用异步方式来执行，例如通过Promises或者async/await来避免直接使用回调函数。
  3. 避免在主线程上进行耗时的操作，例如大量的数组迭代或复杂的DOM操作，可以将这些操作委托给web workers去完成。

示例代码：




// 使用setTimeout分批处理数据
var data = []; // 假设这里有大量数据
 
function processData(index) {
    // 处理数据的逻辑...
 
    if (index < data.length) {
        setTimeout(function() {
            processData(index + 1);
        }, 0);
    }
}
 
processData(0); // 开始分批处理数据

通过这种方式，可以避免JavaScript长时间运行导致的渲染和用户交互问题。

- 阅读更多 -
亲身踩坑 多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果
System
2024-08-13
所有,javascript

报错信息“Failed to decode downloaded font”通常意味着浏览器无法解析或者渲染已经下载到客户端的字体文件。这可能是由于字体文件损坏、格式不正确或者字体服务配置错误导致的。

解决方法：

  1. 检查字体文件：确保字体文件完整且未损坏。可以尝试重新下载或从源头获取字体文件。
  2. 检查MIME类型：确保服务器正确设置了字体文件的MIME类型（如application/x-font-ttf）。
  3. 检查字体URL：确保在Vue组件中引用的字体URL正确，并且与服务器上的实际位置匹配。
  4. 跨域问题：如果字体文件存储在不同的域上，确保服务器配置了正确的CORS策略允许跨域访问。
  5. 浏览器兼容性：检查是否有浏览器不支持当前字体格式的情况，尝试使用兼容性更好的字体格式，如WOFF或WOFF2。
  6. 缓存问题：清除浏览器缓存，有时旧的字体文件可能被缓存，导致问题。
  7. 使用字体加载库：如果问题依旧，可以考虑使用字体加载库（如FontFaceObserver）来确保字体加载成功再渲染文本。
  8. 检查网络问题：确认服务器和客户端之间的网络连接没有问题。

如果以上步骤都无法解决问题，可能需要进一步检查服务器日志，查看是否有更具体的错误信息，或者寻求专业技术支持的帮助。

- 阅读更多 -
掌握Next.js：一个与时俱进的React框架教程
System
2024-08-13
所有,javascript

Next.js是一个React框架，它允许使用React的所有功能，并提供了一些额外的优化，以确保网站或应用的最佳性能。

以下是一个使用Next.js创建的简单页面的代码示例：

首先，你需要安装Next.js。你可以通过运行以下命令来安装它：




npm install next react react-dom

然后，你可以创建一个名为pages/index.js的文件，并添加以下代码：




function Home() {
  return (
    <div>
      <h1>Hello, Next.js</h1>
    </div>
  )
}
 
export default Home

这个简单的页面有一个默认的导出，Next.js将会用它来生成一个SSR版本的HTML，并且还会生成相应的客户端版本，以便在客户端上运行。

最后，你可以运行以下命令来启动Next.js开发服务器：




npx next dev

现在，你可以在浏览器中访问http://localhost:3000来查看你的页面。每次你对代码做出更改时，Next.js都会自动重新加载页面，并且会立即显示更改。

这个示例展示了如何创建一个基本的Next.js页面，并且如何启动和运行一个开发服务器。这是学习Next.js的一个基本起点。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号